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《高 等 院 校 计算 机 应 用 技术 规划 教材 》 


N 入 ?1 世纪 ,计算 机 成 为 人 类 常用 的 现代 工具 ,每 一 个 有 文化 的 人 
都 应 当 了 解 计算 机 ,学 会 使 用 计算 机 来 处 理 各 种 的 事务 。 

学 习 计算 机 知识 有 两 种 不 同 的 方法 :一 种 是 侧重 理论 知识 的 学 习 , 从 原理 
入 手 ,注重 理论 和 概念 ; 另 一 种 是 侧重 于 应 用 的 学 习 , 从 实际 入 手 ,注重 掌握 其 
应 用 的 方法 和 技能 。 不 同 的 人 应 根据 其 具体 情况 选择 不 同 的 学 习 方 法 。 对 多 
数 人 来 说 ,计算 机 是 作为 一 种 工具 来 使 用 的 ,应 当 以 应 用 为 目的 、 以 应 用 为 4 
发 点 。 对 于 应 用 性 人 才 来 说 ,显然 应 当 采 用 后 一 种 学 习 方 法 ,根据 当前 和 今后 
的 需要 ,选择 学 习 的 内 容 ,围绕 应 用 进行 学 习 。 

学 习 计 算 机 应 用 知识 ,并 不 排斥 学 习 必 要 的 基础 理论 知识 ,要 处 理 好 这 二 
者 的 关系 。 在 学 习 过 程 中 ,有 两 种 不 同 的 学 习 模 式 : 一 种 是 金字 塔 模型 , 亦 称 
为 建筑 模型 ,强调 基础 宽厚 , 先 系 统 学 习 理论 知识 , 打 好 基础 以 后 再 联系 实际 
应 用 ; 另 一 种 是 生物 模型 ,植物 并 不 是 先 长 好 树 根 再 长 树干 ,长 好 树干 才 长 树 
冠 ,而 是 树 根 、 树 干 和 树冠 同步 生长 的 。 对 计算 机 应 用 性 人 才 教 育 来 说 ,应 该 
采用 生物 模型 , 随 着 应 用 的 发 展 , 不 断 学 习 和 扩展 有 关 的 理论 知识 ,而 不 是 孤 
立地 无 目的 地 学 习 理 论 知 识 。 

传统 的 理论 课程 采用 以 下 的 三 部 曲 : 提 出 概念 一 解释 概念 一 举例 说 明 ,这 
适合 前 面 第 一 种 侧重 知识 的 学 习 方 法 。 对 于 侧重 应 用 的 学 习 者 ,我 们 提倡 新 
的 三 部 曲 :提出 问题 一 解决 问题 一 归纳 分 析 。 传 统 的 方法 是 : 先 理论 后 实际 ， 
先 抽象 后 具体 , 先 一 般 后 个 别 。 我 们 采用 的 方法 是 :从 实际 到 理论 ,从 具体 到 
抽象 ,从 个 别 到 一 般 ,从 零散 到 系统 。 实 践 证 明 这 种 方法 是 行 之 有 效 的 ,减少 
了 初学 者 在 学 习 上 的 困难 。 这 种 教学 方法 更 适合 于 应 用 型 人 才 。 

检查 学 习 好 坏 的 标准 ,不 是 “知道 不 知道 ” ,而 是 “会 用 不 会 用 ” ,学 习 的 目 
的 主要 在 于 应 用 。 因 此 希望 读者 一 定 要 重视 实践 环节 ,多 上 机 练习 , 干 万 不 要 
满足 于 “上 课 能 听 慌 、 教 材 能 看 懂 ”"。 有 些 问题 ,别人 讲 半 天 也 不 明白 ,自己 一 
上 机 就 清楚 了 。 教 材 中 有 些 实践 性 比较 强 的 内 容 , 不 一 定 在 课堂 上 由 老师 讲 
授 ,而 可 以 指定 学 生 通过 上 机 掌握 这 些 内 容 。 这 样 做 可 以 培养 学 生 的 自学 能 
力 ,启发 学 生 的 求知 欲望 。 
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全 国 高 等 院 校 计算 机 基础 教育 研究 会 历来 倡导 计算 机 基础 教育 必须 坚持 
面向 应 用 的 正确 方向 ,要求 构建 以 应 用 为 中 心 的 课程 体系 ,大 力 推广 新 的 教学 
部 曲 , 这 是 十 分 重要 的 指导 思想 ,这 些 思想 在 《中 国 高 等 院 校 计算 机 基础 课 
程 》 中 作 了 充分 的 说 明 。 本 丛书 完全 符合 并 积极 贯彻 全 国 高 等 院 校 计算 机 基 
础 教育 研究 会 的 指导 思想 ,按照 《中 国 高 等 院 校 计算 机 基础 教育 课程 体系 》 组 
织 编 写 。 

这 套 《 高 等 院 校 计算 机 应 用 技术 规划 教材 ) 是 根据 广大 应 用 型 本 科 和 高 职 
高 专 院 校 的 迫切 需要 而 精心 组 织 的 ,其 中 包括 4 个 系列 : 

(1) 基础 教材 系列 。 该 系列 主要 涵盖 了 计算 机 公共 基础 课程 的 教材 。 

(2) 应 用 型 教材 系列 。 适 合作 为 培养 应 用 性 人 才 的 本 科 院 校 和 基础 较 
好 、 要 求 较 高 的 高 职高 专 学 校 的 主干 教材 。 

《3) 实用 技术 教材 系列 。 针 对 应 用 型 院 校 和 高 职高 专 院 校 所 需 掌握 的 技 
能 技术 编写 的 教材 。 

(4) 实 训 教 材 系列 。 应 用 型 本 科 院 校 和 高 职高 专 院 校 都 可 以 选用 这 类 实 
训 教 材 。 其 特点 是 侧重 实践 环节 ,通过 实践 (而 不 是 通过 理论 讲授 ) 去 获取 知 
识 ,掌握 应 用 。 这 是 教学 改革 的 一 个 重要 方面 。 

本 套 教材 是 从 1999 年 开始 出 版 的 ,根据 教学 的 需要 和 读者 的 意见 , 几 年 
来 多 次 修改 完善 , 选 题 不 断 扩展 ,内 容 日 益 丰 富 ,先后 出 版 了 60 多 种 教材 和 参 
考 书 ,范围 包括 计算 机 专业 和 非 计 算 机 专业 的 教材 和 参考 书 ;必修 课 教 材 、 选 
修 课 教材 和 自学 参考 的 教材 。 不 同 专业 可 以 从 中 选择 所 需要 的 部 分 。 

为 了 保证 教材 的 质量 ,我们 送 选 了 有 丰富 教学 经 验 的 高 校 优 秀 教师 分 别 
作为 本 丛书 各 教材 的 作者 ,这 些 老师 长 期 从 事 计 算 机 的 教学 工作 ,对 应 用 型 的 
教学 特点 有 较 多 的 研究 和 实践 经 验 。 由 于 指导 思想 明确 作者 水 平 较 高 ,教材 
针对 性 强 ,质量 较 高 ,本 丛书 问世 7 年 来 , 愈 来 愈 得 到 各 校 师 生 的 欢迎 和 好 评 ， 
至 今 已 发 行 了 240 多 万 册 ,是 国内 应 用 型 高 校 的 主流 教材 之 一 。2006 年 被 教 
育 部 评 为 普通 高 等 教育 “十 一 五 ”国家 级 规划 教材 ,向 全 国 推荐 。 

由 于 我 国 的 计算 机 应 用 技术 教育 正在 莲 勃 发 展 , 许 多 问题 有 待 深入 讨论 ， 
新 的 经 验 也 会 层出不穷 ,我 们 会 根据 需要 不 断 丰 富 本 丛书 的 内 容 ,扩充 丛书 的 
选 题 ,以 满足 各 校 教 学 的 需要 。 

本 丛书 衣 定 会 有 不 足 之 处 ,请 专家 和 读者 不 将 指正 。 


全 国 高 等 院 校 计算 机 基础 教育 研究 会 会 长 谭 浩 强 
《高 等 院 校 计算 机 应 用 技术 规划 教材 主编 和 
2008 年 5 月 1 日 于 北京 清华 园 
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院 着 Internet 的 普及 ,网 站 编程 技术 越 来 越 受到 人 们 的 重视 , 越 来 越 
多 的 企业 和 个 人 都 希望 使 用 网 站 编程 技术 ,建立 企业 的 网 站 和 个 人 
网 页 。 为 了 迎接 信息 时 代 的 挑战 ,学 习 和 掌握 网 站 编程 技术 无 疑 会 带 来 更 多 
的 机 遇 和 更 大 的 发 展 空间 。 
本 书 第 1 版 受到 读者 的 欢迎 ,在 2006 年 被 评 为 北京 市 高 等 院 校 精品 教 
材 。 由 于 Web 开发 技术 在 不 断 发 展 ,为 了 体现 Web 开发 技术 的 新 特点 ,答谢 
读者 的 喜爱 ,满足 读者 的 需要 ,作者 对 本 书 重新 进行 了 修订 。 作 为 一 本 教材 ， 
本 书 第 2 版 对 网 站 编程 的 基本 技术 做 了 详细 介绍 ,包括 如 何 使 用 HTML 语言 
编写 网 页 ,如何 用 JavaScript 编写 网 页 ,如 何 给 网 页 添加 处 理 数 据 的 功能 ， 
如 何 与 用 户 进行 交互 操作 ,如 何 使 用 CSS 样式 表 来 设计 页 面 的 显示 方式 ,还 
介绍 了 什么 是 动态 网 页 (Active Server Page), 以 及 如 何 使 用 Access 数据 
库 技术 和 JSP 技术 编写 动态 网 页 。 在 内 容 的 编排 上 体现 了 新 的 计算 机 教学 
思想 和 方法 ,以 "提出 问题 一 解决 问题 的 方法 和 实例 一 归纳 必要 的 结论 和 要 
念 ” 的 方式 介绍 了 网 站 编程 的 基本 思路 。 


1. 本 书 主要 特色 


1) 通俗 易 懂 、 图 文 并 茂 

本 书 都 是 通过 具体 的 例子 来 介绍 有 关 Web 开发 技术 的 概念 、 方 法 和 技 
术 ,每 章 都 有 大 量 完整 的 例子 与 源 程序 代码 ,用 来 说 明 使 用 网 站 编程 的 基本 步 
骤 和 基本 方法 ,并 有 图 片 配合 说 明 ,通俗 易 懂 ,读者 完全 可 以 按 书 中 介绍 的 方 
法 完成 每 个 例子 ,通过 实例 理解 网 站 编程 技术 的 基本 思想 和 编程 技巧 。 

2) 内 容 全 面 、 结 构 清晰 、 循 序 渐进 

本 书 对 整个 内 容 做 了 精心 设计 和 安排 ,首先 介绍 HTML 语言 的 产生 、 特 
点 、 结 构 ,然后 介绍 脚本 语言 JavaScript、CSS、JSP、XML、MVC, 接 着 介绍 网 
站 开发 的 阶段 与 开发 方法 ,最 后 介绍 一 个 具体 的 网 站 开发 实现 过 程 。 循 序 渐 
进 , 先 易 后 难 ,逐步 深入 ,通过 具体 实例 引出 后 续 内 容 或 巩固 前 面 介绍 的 内 容 。 

3) 实践 性 强 

在 使 用 本 书 学 习 时 ,可 结合 具体 的 实例 ,上 机 实践 ,按照 书 中 介绍 的 例子 ， 
在 短 时 间 内 使 用 Web 开发 技术 进行 一 个 动态 网 站 的 开发 工作 。 
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2. 本 书 主要 内 容 


在 内 容 上 与 第 1 版 相 比 ,有 了 很 大 改变 。 对 原来 的 内 容 进行 
加 了 新 的 例子 。 

本 书 内 容 可 以 分 为 三 大 部 分 : 

1) 第 一 部 分 为 客户 端 Web 页 编程 技术 (第 1 一 4 章 ) 

第 1 章 是 Web 开发 技术 概述 ,介绍 了 Web 的 基本 概念 和 Web 页 的 基本 
概念 ,引导 读者 进入 网 站 的 世界 。 

第 2 章 介 绍 了 超 文本 标记 语言 一 一 HTML , 它 是 构成 网 页 的 基础 ,如 果 要 
了 解 网 站 与 网 页 编程 技术 ,一 定 要 掌握 这 部 分 内 容 。 

第 3 章 介 绍 了 脚本 语言 一 一 JavaScript ,使 用 JavaScript 可 以 编写 出 
具有 客户 端 动态 功能 的 页 面 。 

第 4 章 介 绍 了 层 垣 样式 表 一 CSS ,使 用 样式 表 可 以 通过 简单 的 方式 来 
设计 网 站 内 所 有 页 面 统一 的 字体 表格、 背景 等 的 显示 风格 ,并 通过 一 些 综合 
实例 说 明 前 面 几 章 所 介绍 的 内 容 。 

2) 第 二 部 分 为 服务 器 端 动态 网 页 的 编程 技术 (第 5 一 8 章 ) 

第 5 章 介 绍 了 Java 服务 网 页 一 一 JSP, 主 要 介绍 了 JSP 的 基本 语法 、 几 
个 重要 隐 含 对 象 的 属性 和 方法 。 

第 6 章 介 绍 了 使 用 JSP 访问 数据 库 的 方法 ,将 原来 MySQL 数据 库 更 改 
为 使 用 Access 数据 库 、 介绍 了 JSP 如 何 和 Access 数据 库 进 行 连接 ,如 何在 
客户 端 对 服务 器 端的 数据 库 内 容 进行 搜索 查询 编辑、 删除 等 操作 。 

第 7、8 章 的 内 容 , 是 新 添加 的 内 容 , 可 作为 选 学 与 自学 的 资料 。 

第 7 章 介绍 可 扩展 标记 语言 一 XML , 介绍 如 何 通过 JSP 获取 XML 中 
的 数据 ,XML 的 作用 。 

第 8 章 介 绍 MVC 模式 的 Java Web 应 用 程序 ,介绍 如 何 按照 MVC 模式 
编写 Java Web 应 用 程序 。 

3) 第 三 部 分 为 综合 应 用 的 内 容 ( 第 9、10 章 ) 

第 9 章 介绍 网 站 开发 各 阶段 的 任务 ,给 出 网 站 开发 过 程 各 个 阶段 的 工作 
任务 ,介绍 网 站 开发 的 基本 方法 ,以 及 网 站 开发 规划 、 网 站 开发 设计 、 网 站 开发 
实施 等 阶段 的 具体 任务 、 主 要 成 果 及 要 求 。 

第 10 章 介 绍 网 站 开发 应 用 实例 ,以 “网 上 体育 用 品 商 店 ” 网 站 开发 为 例 ， 
介绍 了 制作 网 站 公用 程序 文件 、 网 站 首页 和 模块 化 主页 的 方法 ,以 及 一 级 栏目 
页 面 与 二 级 相关 页 面 ,动态 功能 模块 的 开发 方法 ,可 以 较 完整 地 通过 实例 了 解 
开发 一 个 网 站 的 实现 过 程 。 

在 本 书 中 使 用 了 JSP 动态 网 页 的 编程 技术 ,虽然 JSP 使 用 的 是 Java 语 
言 ,但 本 书 对 于 没有 Java 语言 基础 的 读者 同样 适用 , 书 中 对 所 使 用 的 Java 
语言 内 容 都 做 了 介绍 。 当 然 , 如 果 学 习 过 Java 语言 ,使 用 本 书 会 更 加 方便 。 
在 学 习 过 程 中 ,也 可 以 考虑 先 学 习 Java 语言 ,再 学 习 本 书 介绍 的 JSP 编程 
技术 。 


wh 
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学 习 网 站 编程 技术 最 好 的 方法 是 杀 自 动手 编写 相关 的 网 页 ,为 了 使 读者 
更 方便 地 掌握 网 站 编程 技术 ,本 书 采用 程序 实例 分 析 法 ,通过 一 系列 的 程序 实 
例 让 读者 在 实践 中 学 习 网 站 编程 技术 的 概念 和 方法 。 本 书 中 所 有 的 程序 实例 
均 通过 测试 ,可 在 安装 了 浏览 器 及 相关 服务 器 软件 的 计算 机 上 运行 。 读 者 只 
需 在 网 上 下 载 相 关 软 件 (使 用 的 所 有 相关 软件 都 可 以 在 网 上 免费 下 载 ) ,进行 
相关 的 路 径 配 置 ,打开 一 个 文本 编辑 器 ,例如 :Windows 操作 系统 “附件 ”里 的 
“记事 本 ”、“ 写 字 板 ”或 Word ,也 可 使 用 专门 的 网 页 编程 工具 ,然后 参照 书 中 
的 介绍 即 可 编写 出 一 个 个 HTML 和 JSP 程序 。 

这 本 书 只 能 带领 读者 走 进 网 站 编程 技术 的 大 门 , 网 站 编程 技术 随 着 
Internet 的 飞速 发 展 也 在 不 断 地 更 新 和 发 展 , 制 作 网 页 的 工具 也 会 越 来 越 多 ， 
使 用 的 网 站 开发 设计 语言 也 会 越 来 越 多 ,本 书 将 着 眼 于 培养 网 站 编程 技术 的 
基本 思想 ,掌握 一 定 的 网 站 编程 技术 ,为 进一步 学 习 打下 基础 。 

本 书 由 邵 丽 萍 统一 编写 提纲 及 统 稿 ,并 编写 了 第 6 一 8 章 ,第 4、5 章 由 张 
后 扬 编 写 , 第 1、2 章 由 郭 春芳 编写 ,第 3 章 由 北京 交通 大 学 张驰 编写 ,第 9 章 
] 李 静 编 写 , 第 10 章 由 山西 财经 大 学 张 巨 通 编写 。 

本 书 有 教师 配套 使 用 的 电子 课件 及 书 中 实例 的 源 代码 ,由 出 版 社 提供 给 
使 用 本 教材 的 授课 教师 。 
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第 x 病 ' 


Web 开发 技术 概述 


有 过 上 网 绢 玫 历 的 人 就 到 过 Web 网 站 ,Web 网 站 是 什么 组 成 的 呢 ? | 个 Web 网 
站 需要 掌握 哪些 技术 呢 ? 这 就 是 本 书 要 介绍 的 内 容 。 本 书 将 引导 读者 发 现 一 个 又 一 个 的 
问题 ,然后 寻找 解决 问题 的 方案 ,通过 实现 方案 解决 问题 ， pe 

本 章 主 要 解决 以 下 问题 : 

。 什么 是 Web; 

。 什么 是 Web 网 站 ; 

。 什么 是 静态 网 页 与 动态 网 页 ; 

。 有 哪些 常用 的 Web 开发 技术 ; 

。 有 哪些 常用 的 编写 Web 页 的 工具 。 


1.1 什么 是 Web 


本 节 主 要 介绍 Web 的 来 历 、Web 网 站 的 构成 .Web 页 的 特点 、Web 的 工作 方式 。 
1.1.1 Web 的 定义 


Web 是 英文 World Wide Web 的 简称 ,意思 是 布 满 世界 的 蜂 蛛 网 ,中 文 名 称 为 万 维 
网 。Web 由 遍布 在 Internet 上 的 称 为 Web 服务 器 的 计算 机 组 成 , 它 将 世界 各 地 的 各 种 信 
息 资源 有 机 地 组 织 起 来 ,构成 一 个 统一 的 Web 网 络 , 它 是 Internet 的 主干 网 。 

Web 还 是 基于 超 文 本 方式 .具有 友好 用 户 界 面 的 信息 查询 工具 和 信息 发 布 平台 ,ji 
过 Web 浏览 器 显示 Web 页 ,通过 Web 页 面 中 的 超 链 接 (Hyperlink) 可 以 轻松 的 从 一 
Web 页 转移 到 其 他 Web 页 。 这 些 Web 页 可 以 来 自 于 世界 各 地 的 Web 服务 器 ,由 此 可 
见 , Web 又 是 一 个 庞大 的 信息 库 。 

Web 平 台 可 以 提供 多 种 Web 服务 ,例如 可 以 提供 双向 信息 ,一 种 是 通过 浏览 器 浏览 
Web 页 面 中 的 信息 ,一 种 是 用 户 自己 通过 Web 页 面 对 外 发 布 的 信息 。 此 外 ,在 Web 平台 
上 世界 各 地 的 人 员 还 可 以 直接 进行 交谈 ,讨论 问题 ,还 可 以 为 商家 发 布 广告 ,进行 电子 商 
务 活动 。Web 平台 现在 提供 的 服务 越 来 越 多 。 

Web 还 简称 为 3W、W3、WWW ,中 文 名 字 还 有 环球 网 、 全 球 信息 网 等 。 


。 dl 


Web 是 Web 网 络 、Web 服务 器 `Web 浏览 器 `Web 页 的 总 称 。Web 网 络 是 连接 世界 
各 地 Web 服务 器 的 网 络 , Web 服务 器 是 指 提 供 Web 服务 与 存放 Web 页 的 计算 机 , Web 
浏览 器 是 安装 在 计算 机 上 用 来 显示 Web 页 的 软件 。Web 网 络 、Web 服务 器 、Web 浏览 器 
是 显示 与 使 用 Web 页 的 基础 。 可 见 Web 页 是 多 么 重要 , 接 下 来 本 书 介 绍 Web 页 。 


1.1.2 Web 页 、Web 网 站 和 主页 
1. Web 页 


Web 页 就 是 上 网 时 通过 浏览 器 看 到 的 一 个 完整 页 面 ,简称 为 网 页 。 

网 页 可 用 HTML、ASP、JSP 等 语言 编写 ,网 页 中 可 以 含有 标记 码 文字、 表格 、 图 像 、 
动画 、 超 链接 、 声 音 以 及 视频 等 不 同 元 素 。 每 一 个 网 页 都 是 存放 在 Web 服务 器 磁盘 中 的 
一 个 独立 文件 ,可 以 单独 浏览 与 编辑 。 


2. Web 网 站 


网 页 可 以 按 一 定 的 方式 连结 在 一 起 ,构成 一 个 整体 ,共同 描述 一 组 完整 的 新 闻 信 息 ， 
介绍 部 门 与 企业 的 情况 ,提供 一 组 不 同 功能 与 服务 。 因 此 ,将 存放 在 Web 服务 器 上 具有 
共同 主题 ,相似 性 质 的 一 组 网 页 及 网 络 资源 文件 称 为 Web 网 站 ,简称 为 网 站 。 可 见 , 网 站 
是 由 网 页 构成 的 。 


3. 主页 


网 站 总 是 由 一 个 主页 和 若干 从 页 组 成 。 进 入 网 站 的 第 一 个 页 面 称 为 主页 ,一般 将 其 
文件 命名 为 index. * 。 它 和 普通 网 页 一 样 ,是 一 个 单独 的 网 页 ,可 以 显示 各 种 信息 ,但 它 
有 具有 特殊 性 , 它 是 网 站 的 出 发 点 和 各 网 页 的 汇总 点 。 主 页 总 是 与 一 个 网 址 (URL) 相 对 
应 ,可 引导 用 户 走 进 一 个 网 站 。 在 主页 里 ,可 以 看 到 这 个 站 点 的 基本 信息 和 主要 内 容 , 使 
浏览 的 用 户 看 到 后 就 可 知道 该 站 点 的 基本 内 容 , 知 道 这 里 的 信息 对 他 是 否 有 用 ,是 否 继续 
浏览 ,是 否 进行 注册 以 得 到 更 多 的 服务 。 因 此 ,主页 比 其 他 网 页 更 重要 ,浏览 者 访问 Web 
网 站 ,首先 看 到 的 就 是 网 站 的 主页 。 图 1. 1 是 联想 网 站 的 主页 。 


4. 首页 
有 的 网 站 为 了 让 用 户 快 速 浏览 到 自己 的 网 站 ,在 进入 主页 前 首先 连接 的 是 一 个 简洁 


的 反映 该 网 站 特点 的 页 面 ' 有 时 将 这 种 类 型 的 主页 称 为 首页 ,一 般 由 首页 提供 连接 到 主页 
的 路 径 。 图 1. 2 为 百度 网 站 的 首页 。 


5. Web 页 的 特点 
上 网 的 人 大 约 有 80% 的 时 间 在 浏览 Web 页 ,因为 Web 页 具有 及 时 、 新 颖 .美观 、 方 
便 、 简 单 和 适应 性 强 的 特点 。 


及 时 、 新 颖 体现 在 Web 页 显示 的 信息 内 容 要 是 最 新 的 。 
美观 是 人 人 可 见 的 。Web 页 上 不 仅 有 文字 ,还 有 图 片 、 颜 色 、 动 画 等 许多 内 容 。 
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方便 是 因为 Web 页 都 是 超 文本 。 在 Web 页 上 ,任何 一 
可 以 被 指定 为 一 个 超 链 接 , 当 选择 访问 一 个 超 链接 所 指 的 内 容 时 ,只 
让 器 上 。 超 链接 就 像 * 超 人 ”一 


内 容 就 


会 自动 地 显示 在 浏览 


图 1.2 百 


度 网 站 首页 


个 字符 、 短 语 、 图 片 、 按 钮 等 都 
要 单 击 该 链接 ,这 个 
样 ,跟着 他 可 以 任意 地 在 Web 的 


信息 世界 里 邀 游 ,所 以 ,Web 页 面 又 称 为 超 文 本 页 面 。 


.gl 


简单 主要 指 的 是 超 文本 描述 语言 HTML, 它 仅仅 是 一 组 用 来 规定 页 面 布局 的 标记 且 
数量 有 限 ,简单 易学 ,人 人 都 可 以 快速 地 掌握 使 用 HTML 编写 Web 页 的 方法 。 

适应 性 强 是 指 Web 页 独立 于 操作 系统 平台 ,可 以 用 任何 一 种 浏览 器 来 显示 ,也 可 以 
用 任何 一 种 文本 编辑 器 来 编辑 。 


1.1.3 网址 


Web 网 络 上 有 大 量 的 Web 服务 器 ,服务 器 上 有 大 量 的 Web 页 文件 ,如 何 找到 需要 的 
Web 页 呢 ? 这 就 需要 借助 URL 了 。URL 是 英文 Uniform Resource Locations 的 缩写 ， 
中 文 称 为 统一 资源 定位 器 ,网址 、URL 地 址 或 网 站 地 址 。URL 可 以 看 成 是 一 个 指针 ,用 
来 指定 Internet 网 上 一 个 具体 的 网 络 空间 地 址 , 它 提 供 了 一 个 统一 的 方法 获取 网 上 的 信 
息 资源 。 

因此 ,为 了 让 其 他 用 户 在 网 上 能 看 到 Web 页 ,在 存放 Web 页 与 其 他 信息 资源 在 Web 
服务 器 的 时 候 , 必 须 确定 其 网 络 空间 地 址 URL, 以便 浏览 器 能 够 顺利 地 找到 这 个 Web 
页 。 有 了 URL ,在 浏览 器 地 址 栏 中 输入 URL ,例如 http://www. bjtu. edu. cn, 不 久 就 可 
以 在 屏幕 上 看 到 北京 交通 大 学 的 网 页 了 。 

完整 的 网 址 URL 看 起 来 很 长 ,例如 ,http://www. njtu. edu. cn/home/Homepage. 
htm, 可 将 它们 分 为 如 下 4 个 部 分 来 理解 : 


方式 :// 主 机 名 /地 点 /文件 名 
下 方式 


方式 指数 据 传输 的 方式 ,也 可 称 为 协议 。 关 于 它 具 体 是 什么 内 容 , 暂 时 可 以 不 去 理 
会 ,只 要 知道 是 提供 的 Web 服务 类 型 就 行 了 。 例 如 HTTP、Gopher、FTP、News、Telnet、 
File、Mailto 等 ,将 来 还 会 有 新 增加 的 信息 服务 。HTTP 是 Web 的 基本 协议 ,是 传输 普通 
文本 .声音 .图像 以 及 其 他 在 Internet 上 可 以 访问 的 信息 的 协议 。 


2. 主机 名 


主机 名 一 般 指 的 是 Web 服务 器 的 地 址 , 即 网 页 所 在 计算 机 的 名 字 或 IP (Internet 
Protocol) 地址 .域名 (Domain Name System,.DNS) 地 址 。 

IP 地 址 由 4 部 分 数字 组 成 ,每 部 分 数字 不 大 于 256, 例 如 202. 112. 144. 65。 由 于 IP 
地 址 是 一 些 数字 ,不 好 记 , 一 般 采 用 好 记 的 域名 地 址 , 它 由 字母 表示 ,具有 一 定 的 人 逻辑 关 
系 ,例如 www. bjtu. edu. cn。 

域名 地 址 通常 也 分 为 四 部 分 : 机 器 名 .单位 名 . 单位 类 别 . 国家 简称 。 例 如 ,北京 交通 
大 学 Web 服务 器 域名 地 址 为 : www. bjtu. edu. cn。www 表示 服务 器 名 称 ,bjtu 表示 单 
位 名 (北京 交通 大 学 ) ,edu 表示 单位 类 别 为 教育 部 门 ,cn 为 中 国 的 简称 。 其 中 机 器 名 和 单 
位 名 可 以 自由 确定 ,单位 类 别 、 国 家 简称 有 一 定 的 规则 。 例 如 ,单位 类 别 gov 表示 政府 部 
门 ,mil 表示 军事 部 门 ,net 表示 计算 机 网 络 服务 机 构 ,com 表示 商业 机 构 ,int 表示 国际 组 
织 。 国 家 简称 中 uk 表示 英国 .ca 表示 加 拿 大 等 。 

注意 : Internet 上 的 IP 地 址 或 域名 地 址 需要 到 相关 管理 部 门 进行 注册 登记 ,以 免 重 
J 。 


复 使 用 。 
3. 地 点 
地 点 指 的 是 在 Web 服务 器 上 存放 Web 页 的 目录 (/JSP/) 。 
4. 文件 名 


文件 名 指 的 是 Web 页 的 名 字 , 例 如 ,1.jsp。 

根据 URL 的 结构 可 知 ,http://zhc/JSP/1. htm 表示 是 用 http 协议 访问 zhc 服务 器 
上 /JSP/ 目 录 下 的 1. htm 文件 ,这 是 一 个 Web 页 。 

不 过 ,URL 地 址 通常 不 必 包 括 4 个 部 分 ,只 要 包含 方式 与 主机 名 即 可 ,例如 http:// 
www. sina. com 就 是 一 个 有 效 的 网 址 。 当 不 指定 文件 名 时 ,大 多 数 的 Web 服务 器 都 会 使 
用 一 个 诸如 default. * 或 者 index. * 之 类 的 文件 作为 默认 的 该 服务 器 的 主页 。 

除了 在 浏览 器 地 址 栏 输入 URL 查找 Web 上 的 网 页 外 ,通过 网 页 文件 中 的 超 链 接 也 
可 以 查找 Web 上 的 网 页 ,因为 每 个 超 链 接 都 对 应 一 个 URL, 当 访问 者 在 浏览 网 页 时 , 单 
击 超 链接 浏览 器 就 会 根据 URL 在 Web 上 查找 并 显示 这 个 网 页 。 


1.1.4 Web 的 工作 方式 


Web 是 如 何 将 存放 在 Web 服务 器 中 的 Web 页 显示 在 用 户 的 浏览 器 中 呢 ? 
Web 是 以 客户 /服务 器 模式 完成 上 述 工作 的 。 什 么 是 客户 /服务 器 模式 呢 ? 


1. 客户 /服务 器 模式 


客户 是 指 用 来 与 数据 提供 者 (服务 器 ?通信 的 计算 机 ,也 称 为 客户 机 ,客户 机 可 以 使 用 
服务 器 上 的 资源 。 客 户 机 可 由 遍布 世界 各 地 的 企业 、. 单 位、 家庭 个 人 等 用 户 使 用 的 计算 
机 组 成 ,客户 机 与 服务 器 相连 ,客户 机 上 的 浏览 器 可 以 发 送 或 接收 信息 。 

服务 器 是 指 能 向 许多 客户 同时 提供 信息 资源 的 计算 机 ,可 由 遍布 世界 各 地 的 大 型 机 
构 或 个 人 的 计算 机 构成 。 服 务 器 既 可 以 是 物理 的 计算 机 ,也 可 以 是 服务 器 软件 ,或 者 是 在 
计算 机 上 运行 的 端口 监督 程序 。 端 口 监督 程序 时 刻 监听 着 来 自 客户 端的 请 求 ,然后 交 由 
服务 器 中 相应 程序 处 理 请 求 ,最 后 将 处 理 后 的 结果 返回 给 请 求 的 客户 。 客 户 机 和 服务 器 
可 以 是 同一 台 计算 机 ,一 般 是 由 网 络 连接 的 不 同 计算 机 分 别 担任 客户 机 与 服务 器 的 任务 。 

如 果 使 用 过 银行 的 ATM 提 款 机 ,就 可 以 很 容易 理解 客户 /服务 器 模式 的 应 用 。 在 客 
户 机 ATM 上 输入 用 户 名 和 密码 ,提交 给 ATM 连接 的 服务 器 进行 验证 ,服务 器 验证 无 误 
后 将 结果 传递 给 ATM 机 ,用 户 便 可 在 ATM 上 获得 自己 的 账户 信息 并 可 进行 提 款 工作 。 


2. 实现 客户 /服务 器 模式 的 三 种 构件 


Web 要 实现 客户 /服务 器 工作 方式 需要 三 种 构件 协调 一 致 进行 共同 工作 。 

第 一 种 构件 是 客户 机 上 的 浏览 器 软件 , 它 负 责 显示 网 页 内 容 或 发 送 /接收 信息 ,常用 
的 浏览 器 软件 有 IE、Netscape 等 。 

第 二 种 构件 是 Web 服务 器 与 服务 器 管理 软件 ,提供 Web 服务 的 计算 机 (软件 ) 用 来 
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为 客户 端 提供 信息 服务 ,目前 广泛 使 用 的 Web 服务 器 管理 软件 有 运行 于 Windows 平台 
支持 ASP 的 服务 器 软件 IIS(Internet Information Server)、 运行 于 UNIX、Linux 平台 支 
持 PHP 的 服务 器 软件 Apache、 可 在 多 种 平台 下 运行 支持 JSP 的 服务 器 软件 TOMCAT。 

第 三 种 构件 是 HTTP(CHypertext Transfer Protocol) , 它 用 来 在 Internet 上 传送 超 文 
本 协议 ,简称 为 超 文本 传送 协议 ,客户 机 与 服务 器 根据 这 个 协议 来 传送 信息 。 

协议 (protocol) 是 关于 信息 格式 及 信息 交换 规则 的 正式 描述 。 在 信息 技术 中 ,协议 
就 是 一 些 特殊 的 规则 集合 , 它 被 通信 的 接收 方 和 发 送 方 认 可 ,接收 到 的 信息 和 发 送 的 信息 
均 以 这 种 规则 加 以 解释 。 协 议 就 好 比 每 个 国家 都 有 自己 特定 的 对 外 交流 准则 和 交流 方 
式 ,在 Internet 上 , 它 统一 了 人 们 在 网 上 的 交流 方式 ,可 以 使 浏览 器 更 加 高 效 , 使 网 络 传输 
量 减少 。 在 Web 服务 器 上 除了 Web 页 以 外 ,还 有 一 个 HTTP 驻 留 程序 软件 端口 监 
督 程 序 ,专门 用 于 响应 用 户 请 求 。 


3. Web 的 工作 过 程 


Web 的 工作 从 Web 网 络 上 客户 端 开始 ,客户 端 通过 Web 浏览 器 向 Web 服务 器 发 送 
一 个 查询 请 求 , 即 当 用 户 在 浏览 器 中 输入 了 一 个 开始 文件 或 单 击 了 一 个 超级 链接 时 ,浏览 
器 就 向 服务 器 发 送 一 个 HTTP 请 求 , 此 请 求 被 送 往 由 IP 地 址 指定 的 Web 服务 器 。 服 务 
器 上 的 HTTP 驻 留 程序 接收 到 请 求 后 立即 进行 必要 的 操作 ,然后 使 用 HTTP 协议 约定 
好 的 格式 回 送 所 要 求 的 文件 或 结果 信息 。 客 户 端的 用 户 可 以 在 浏览 器 上 看 到 服务 器 回 送 
的 结果 ,如 图 1.3 所 示 。 


[本 | 本 


服务 器 


Internet 


图 1.3 Web 的 工作 过 程 


由 此 可 见 , Web 服务 器 负责 对 来 自 客户 机 的 请 求 做 出 回答 ,并 且 负 责 管理 信息 、 寻 找 
信息 和 传递 信息 。 一 个 Web 服务 器 除了 提供 它 自身 的 独特 信息 外 ,还 “指引 ”着 存放 在 其 
他 Web 服务 器 上 的 信息 。 那 些 Web 服务 器 又 指向 更 多 的 Web 服务 器 ,当然 ,还 可 以 返 
回 到 初始 的 Web 服务 器 。 如 此 这 样 ,一 个 世界 范围 的 信息 服务 器 交织 而 成 的 信息 网 就 形 
成 了 , 它 像 师 蛛网 一 样 还 会 越 来 越 大 , 故 称 World Wide Web 是 布 满 世界 的 蜂 蛛 网 。 


1.1.5 静态 网 页 与 请 求 /回答 模式 


使 用 HTML 语言 直接 书写 的 .内容 固定 不 变 ” 的 网 页 称 为 静态 网 页 。 静 态 网 页 保 
存在 Web 服务 器 上 , 当 用 户 浏览 器 通过 URL 或 包含 URL 的 超 链 接 元 素 向 Web 服务 器 
请 求 网 页 内 容 时 ,Web 服务 器 仅仅 是 将 原 已 设计 好 的 静态 HTML 文档 传送 给 用 户 浏览 
器 (如 图 1.4 所 示 )。 
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URL -| HTrvr 国 

双 HzML 文 件 | 训 | 加 CJ 

客户 机 浏览 回 Web 服务 器 
图 1.4 请 求 /回答 模式 


这 种 Web 的 工作 模式 称 为 B/S(Browse/Server) 结 构 . 也 可 称 为 请 求 /回答 模式 , 按 
照 这 种 模式 Web 服务 器 与 浏览 器 之 间 进 行 交互 的 步骤 可 归纳 如 下 : 

用 户 在 浏览 器 输入 URL ,例如 http://www. sina. com, 按 回 车 键 后 就 开始 对 一 个 服 
务 器 发 出 HTTP 请 求 。 

浏览 器 请 求 域名 服务 器 DNS 解析 http://www. sina. com 的 IP 地 址 ,并 得 到 该 域名 
的 IP 地址 。 

浏览 器 向 该 IP 地 址 的 80 端口 请 求 一 个 TCP(Transmission Control Protocol) 连 接 ， 
一 旦 TCP 连接 成 功 , 浏 览 器 将 发 送 请 求 信 息 ,例如 get/index. html。 

Web 服务 器 接收 到 请 求 信 息 后 ,首先 将 Web 页 index. html 发 送 给 浏览 器 ,然后 关闭 
服务 器 。 

浏览 器 将 显示 Web 页 index. html 文件 中 的 文档 内 容 。 


1.1.6 动态 网 页 与 三 层 B/S 模式 


内 容 能 够 因 人 因 时 变化 .能 够 在 客户 端 与 服务 器 端 进行 交互 的 网 页 称 为 动态 网 页 。 
在 动态 网 页 中 ,常用 到 Web 数据 库 的 数据 ,图 1.5 为 引入 Web 数据 库 后 的 三 层 B/S 模式 
示意 图 。 


超 | 行 革 本 程序 上 二 于 -| 的 行 SQL 查询 
下 立 件 | 运行 脚本 程序 在 Ii 疆 时 ”| 执行 村 论 
能 -ML 文件 | 产生 HTML 文 件 |-- 查 交 结 果 | 返回 查询 结果 


| 
客户 机 浏览 器 Web 服 务 器 数据 库 服务 器 


图 1.5 三 层 B/S 模式 


当 客户 机 的 浏览 器 通过 URL 向 Web 服务 器 请 求 下 载 信息 时 ,在 Web 服务 器 上 要 运 
行 租 入 在 网 页 中 的 脚本 程序 ,脚本 程序 通过 SQL 查询 调用 数据 库 服务 器 中 存储 的 数据 ， 
数据 库 服 务 器 执行 查询 操作 ,将 结果 返回 到 Web 服务 器 ,产生 特定 格式 的 HTML 文件 。 
这 样 当 客户 端 浏 览 器 通过 URL 请 求 信 息 到 显示 信息 完毕 ,客户 端 接收 到 的 HTML 文件 
中 的 内 容 实 际 上 是 由 数据 库 提供 的 。 这 种 方式 使 处 理 更 灵活 ,自由 度 更 大 。 
出 于 效率 考虑 ,Web 服务 器 和 数据 库 服务 器 常 在 一 个 局 域 网 中 ,甚至 在 同一 台 机 器 
上 。 由 动态 网 页 组 成 的 网 站 称 为 动态 网 站 , 它 有 如 下 优点 。 
(1) 自动 更 新 。 即 无 需 手 动 更 新 HTML 文档 , 便 会 自动 生成 新 的 页 面 ,可 以 大 大 节 
CA 


省 工作 量 , 例 如 ,新闻 网 站 。 

(2) 交互 性 。 即 网 页 会 根据 用 户 的 要 求 及 选择 而 动态 改变 和 响应 ,将 浏览 器 作为 客 
户 端 界面 。 例 如 电子 商务 中 的 网 上 超市 ` 网 上 书店 、 留 言 短 等 ,这 将 是 今后 Web 发 展 的 
趋势 。 

(3) 因 时 因 人 而 变 。 即 当 不 同 的 时 间 不同 的 人 访问 同一 网 址 时 会 产生 不 同 的 页 面 ， 
例如 ,网 上 教务 系统 。 


1.2 ”Web 开发 技术 的 起 源 一 一 HTML 


Web 网 络 的 历史 很 短 , 但 它 已 经 从 一 个 大 部 分 显示 静态 信息 的 网 络 媒体 演化 到 能 对 
股票 进行 交易 和 进行 网 上 购书 等 操作 的 一 个 基础 设施 。 在 Web 网 络 上 可 以 使 用 各 种 各 
样 的 应 用 程序 ,这 些 应 用 程序 组 成 的 信息 系统 进一步 扩大 了 Web 的 应 用 。 它 不 仅 表 现在 
网 络 上 ,还 表现 在 企业 及 其 他 各 个 领域 ,以 至 传统 的 基于 客户 机 /服务 器 的 应 用 程序 都 在 
逐渐 被 基于 浏览 器 /服务 器 的 应 用 程序 所 替代 。 

基于 浏览 器 /服务 器 的 应 用 程序 较 传 统 的 基于 客户 机 /服务 器 的 应 用 程序 有 很 多 优 
点 ,这 些 优点 包括 几乎 没有 限制 的 客户 端 访 问 和 极为 简化 的 应 用 程序 部 署 和 管理 (要 更 新 
一 个 应 用 程序 ,管理 人 员 只 需要 更 改 一 个 基于 服务 器 的 程序 ,而 不 是 成 千 上 万 的 安装 在 客 
户 端的 应 用 程序 ) 。 这 些 变化 使 得 软件 产业 迅速 地 向 B/S 模式 的 多 层次 应 用 程序 迈进 。 

B/S 模式 多 层次 应 用 程序 快速 增长 的 需求 ,使 得 Web 开发 技术 不 断 改 进 。HTML 
对 于 显示 相对 静态 的 内 容 是 不 错 的 选择 ,但 不 能 创建 交互 的 Web 页 ,交互 的 页 面 内 容 是 
基于 用 户 的 请 求 或 者 系统 的 状态 来 确定 的 ,不 是 预先 定义 的 文字 。 为 满足 这 种 需要 ,一 些 
动态 的 Web 开发 技术 应 运 而 生 。 因 此 ,网 上 不 仅 可 以 看 到 后 级 名 为 . html 或 . htm 的 网 
页 ,还 能 看 到 很 多 后 级 名 为 .jsp、. asp、. aspx、. php、. phpx 的 Web 页 ,这 些 Web 页 是 不 同 
的 ,它们 表示 网 页 是 由 不 同 的 Web 开发 技术 编写 的 文件 。 

本 节 的 内 容 主 要 介绍 Web 开发 技术 的 起 源 HTML 语言 的 产生 发展、 构成 与 不 足 。 


1.2.1 HTML 的 发 展 过 程 


作为 一 种 实用 的 超 文 本 语言 ,HTML 的 历史 最 早 可 以 追溯 到 20 世纪 40 年 代 。1945 年 ， 
Vannevar Bush 在 一 篇 文章 中 阐述 了 文本 和 文本 之 间 通 过 超级 链接 相互 关联 的 思想 ,并 
在 文中 给 出 了 一 种 能 实现 信息 关联 的 计算 机 Memex 的 设计 方案 。Doug Engelbart 等 人 
则 在 1960 年 前 后 ,对 信息 关联 技术 做 了 最 早 的 实验 。 与 此 同时 ,Ted Nelson 正式 将 这 种 
信息 关联 技术 命名 为 超 文 本 (hypertext) 技 术 。1969 年 ,IBM 的 Charles Goldfarb 发 明了 
可 用 于 描述 超 文 本 信息 的 GML(Generalized Markup Language, 通 用 标记 语言 )。1978 一 
1986 年 间 , 在 ANSI( 美 国 国 家 标准 协会 ) 等 组 织 的 努力 下 ,GML 语言 进一步 发 展 成 为 车 
名 的 SGML(Standardized Generalized Markup Language, 标 准 通 用 标记 语言 ) 语 言 标准 。 
当 Berners Lee( 伯 纳 斯 。 李 ) 和 他 的 同事 们 在 1989 年 试图 创建 一 个 基于 超 文本 的 分 布 式 
应 用 系统 时 ,他 意识 到 SGML 是 描述 超 文 本 信息 的 一 个 上 佳 方 案 , 美 中 不 足 的 是 SGML 
过 于 复杂 ,不 利于 信息 的 传递 和 人 解析。 于 是 , 伯 纳 斯 李 对 SGML 语言 做 了 大 刀 阔 径 的 


人 ms， 


简化 和 完善 ,设计 了 一 种 为 Web 度 身 定制 的 语言 一 -HTML (Hyper Text Markup 
Language , 超 文 本 标记 语言 ) 来 展现 超 文本 信息 。 

HTML 的 设计 思想 非常 简单 , 伯 纳 斯 。 李 只 是 希望 在 网 上 显示 文字 并 通过 页 面 的 超 
链接 实现 网 页 的 连接 ,他 设计 了 一 个 初级 浏览 器 和 一 个 编辑 系统 并 在 网 上 合 二 为 一 ,通过 
它们 来 显示 HTML 编写 的 超 文本 信息 ,通过 浏览 器 实现 超 链接 。1990 年 11 月 ,第 一 个 
Web 服务 器 nxoc01. cern. ch 开始 运行 , 伯 纳 斯 。 李 在 自己 编写 的 图 形 化 Web 浏览 器 
World Wide Web 上 看 到 了 最 早 的 Web 页 面 。 

由 于 伯 纳 斯 。 李 设计 的 HTML 是 以 文本 格式 为 基础 的 ,可 以 用 任何 编辑 器 和 文字 
处 理 器 创建 ,而 且 它 仅 有 不 多 的 几 个 标记 (tag), 所 以 很 容易 掌握 编写 HTML 文档 的 方 
法 。HTML 很 快 在 Web 上 得 到 普及 与 使 用 。HTML 使 Web 网 络 开 始 了 新 篇 章 , Web 
网 络 因此 得 到 迅猛 发 展 , 在 Web 网 可 以 很 容易 地 发 布 信息 与 浏览 文本 信息 。1991 年 ， 
CERN(European Particle Physics Laboratory ,欧洲 粒子 物理 实验 室 , 万 维 网 的 发 祥 地 ) 正 
式 发 布 了 Web 技术 标准 。 目 前 ,与 Web 相关 的 各 
种 技术 标准 都 由 著名 的 W3C(World Wide Web 
Consortium ,万 维 网 协会 ) 组 织 管理 和 维护 ,W3C 
的 主任 是 伯 纳 斯 . 李 。 因 为 在 互联 网 技术 上 的 杰 
出 贡献 , 伯 纳 斯 。 李 被 业界 公认 为 “互联 网 之 父 ”。 
他 的 发 明 改 变 了 全 球 信 息 化 的 传统 模式 , 带 来 了 
一 个 信息 交流 的 全 新 时 代 。 然 而 比 他 的 发 明 更 伟 


大 的 是 , 伯 纳 斯 " 李 ( 见 图 1.6) 并 没有 像 其 他 人 那 图 re 伯 纳 斯 。 李 
样 为 WWW 申请 专利 或 限制 它 的 使 用 ,而 是 无 偿 
地 向 全 世界 开放 。 


能 在 网 上 看 到 文本 后 ,人 们 又 提出 了 新 的 问题 : 能 和 否 在 网 上 看 到 图 像 .动画 呢 ? 早期 的 
浏览 器 仅 能 显示 文本 文字 。 如 何 解 决 这 个 问题 呢 ? 1993 年 ,一 个 名 叫 Marc Andreessen 的 
大 学 生 在 他 的 Mosaic 浏览 器 上 加 入 了 图 像 二 img 二 标记 .从 此 在 Web 网 络 上 可 以 看 到 图 像 
了 。 而 后 ,Mosaic 浏览 器 随 二 img 二 推 向 市 场 . 伯 纳 斯 * 李 加 入 了 初期 的 国际 互联 网 研究 组 
织 , 而 Marc 在 加 利 福 尼 亚 创 建 了 一 个 名 为 Netscape 的 浏览 器 公司 。 

但 人 们 认为 仅 有 图 像 和 图 标 还 远 远 不 够 ,希望 可 以 将 任何 形式 的 媒介 信息 加 到 网 页 
上 去 。 因 此 ,HTML 不 停 地 发 展 ,不 断 产 生 新 型 .功能 强大 且 生 动 有 趣 的 标记 形式 和 可 以 
识别 它们 的 浏览 器 。 所 以 :出 现 了 二 background 二 (背景 )、 一 frame 二 (框架 )、 一 font 二 
(字体 ) 和 二 blink 二 (闪烁 效果 ) 等 标记 。Microsoft 公司 致力 于 网 上 游戏 领域 ,他 们 设计 
了 一 marquee 盖 (滚动 的 字 ) 和 二 bgsound 二 (背景 声效 ) 等 标记 。 

越 来 越 多 的 标记 会 不 会 给 浏览 器 造成 困惑 呢 ?HTML 的 一 个 优越 特性 是 如 果 一 个 
Web 浏览 器 不 能 识别 一 个 标记 属性 时 ,这 个 属性 将 被 忽略 ,而 且 不 会 有 任何 副作用 。 所 
以 ,在 HTML 中 可 以 放心 地 使 用 各 种 标记 。 

HTML 的 发 展 过 程 很 有 启发 意义 ,而 且 由 于 HTML 的 出 现 , 使 互联 网 络 得 到 迅猛 地 
发 展 ,目前 人 们 的 工作 与 生活 已 经 越 来 越 离 不 开 网 络 了 。 
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1.2.2 HTML 文档 的 组 成 


用 HTML 编写 的 超 文本 文档 称 为 HTML 文档 , 它 能 独立 于 各 种 操作 系统 平台 (如 
UNIX,Windows 等 )。 自 1990 年 以 来 HTML 一 直 被 作为 Web 上 的 信息 表示 语言 ,用 于 
描述 页 面 的 格式 设计 和 它 与 Web 上 其 他 页 面 的 连接 信息 。 

HTML 语言 是 由 描述 性 的 标记 符 ( 称 为 标记 码 ) 构 成 的 。 标 记 码 是 区 分 文本 各 个 组 
成 部 分 的 分 界 符 , 它 把 HTML 文档 划分 成 不 同 的 结构 部 分 ,例如 页 面 、 标 题 、 段 落 、 正 文 
主体 、 超 链接 、 表 格 图像、 表单 等 ,并 向 浏览 器 提供 该 文档 的 格式 化 信息 ,以 显示 文档 的 外 
观 特征 。 标 记 码 由 一 对 尖 括 号 和 英文 字母 及 其 他 符号 构成 ,例如 二 html 二 。 

HTML 文档 包含 两 种 信息 ,一 种 是 页 面 要 显示 的 各 种 文本 文字 ;一 种 是 标记 码 , 用 来 
描述 页 面 的 不 同 元 素 ,结构 ,文本 格式 和 超 文本 链接 。HTML 文档 是 一 个 ASCII 文本 文 


件 , 通 常 它 带 有 . html 或 . htm 后 级 名 。 


例 1.1 一 个 简单 的 HTMEL 文档 (文件 名 为 1-1. html) 。 


<html> 
<head> 
<title> 
Web 页 面 的 标题 
</title> 
< /head> 
<body> 


HTML 语言 的 范例 : 


<p> 
<img src="girl.gif" height= 120 width= 90> 
</p> 
< /body> 
< /html> 


1-1. html 文档 通过 标记 码 描 述 了 显示 文本 文字 HTML 语言 的 范例 ”和 一 个 图 像 元 


素 girl. gif 的 格式 。 在 浏览 器 里 浏览 该 页 面 
时 ,浏览 器 将 把 每 个 标记 码 解 释 成 它 指 明 的 含 
义 ,在 默认 位 置 以 指定 的 样式 将 文字 与 图 像 显 
示 在 屏幕 上 。 在 屏幕 上 看 不 到 HTML 标记 
码 , 看 到 的 只 有 要 显示 的 文字 和 图 像 , 如 图 1.7 
所 示 。 

通过 HTML 的 标记 码 , 可 以 设置 文本 文 
字 的 字体 和 颜色 ,插入 各 种 图 像 和 表格 ,还 可 以 
加 入 指向 Internet 上 任意 一 个 Web 页 的 超 链 
接 。 正 是 有 了 这 些 HTML 标记 码 , Web 页 才 
变 得 漂亮 美观 ,多 姿 多 彩 。HTML 语言 使 网 络 
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图 1.7 HTML 页 面 显示 的 文字 与 图 片 


从 一 个 静态 的 文本 世界 变 成 了 一 个 丰富 多 彩 的 多 媒体 世界 。HTML 是 网 上 最 早 的 公用 


语言 。 


1.2.3 HTML 的 不 足 
随 着 Web 应 用 的 发 展 ,HTML 语言 的 不 足 开始 显现 出 来 。 主 要 表现 如 下 : 
1. 静态 性 


由 于 HTML 文档 在 浏览 时 不 会 因 时 因 地 而 发 生变 化 ,也 不 允许 在 浏览 器 加 载 后 更 
改 页 面 内 容 , 所 以 HTML 文档 为 静态 的 、 固 定 的 , 它 限制 了 其 更 新 的 速度 ,如 果 要 更 新 其 
内 容 , 整 个 页 面 的 内 容 需 要 全 部 修改 。 


2. 格式 与 布局 的 局 限 
在 HTML 文档 中 不 能 随意 扩展 文本 格式 。 不 能 设计 像 报 纸 .杂志 那样 漂亮 的 布局 。 
3. 不 能 设计 计算 功能 


在 HTML 文档 中 不 能 实现 高 级 程序 设计 语言 的 计算 功能 ,所 以 不 能 满足 人 们 对 网 
络 越 来 越 多 的 功能 需求 。 

HTML 的 不 足 给 其 他 Web 开发 技术 留 下 了 空间 ,一 些 新 的 .动态 的 Web 开发 技术 
开始 出 现 。 


1.3 客户 端 技术 


Web 是 一 种 典型 的 分 布 式 应 用 架构 。Web 应 用 中 的 每 一 次 信息 交换 都 要 涉及 到 客 
户 端 和 服务 端 两 个 层面 。 因 此 ,Web 开发 技术 大 体 上 也 可 以 被 分 为 客户 端 技 术 和 服务 端 
技术 两 大 类 。 

本 节 的 内 容 主 要 介绍 Web 客户 端 技 术 中 的 典型 代表 JavaScript、VBScript、CSS 和 
DHTML。 


1.3.1 JavaScript 和 VBScript 


Web 客户 端的 主要 任务 是 展现 信息 内 容 , 而 HTML 语言 则 是 信息 展现 的 最 有 效 的 
载体 之 一 。 

为 了 弥补 HTML 静态 性 的 不 足 , 在 HTML 页 面 中 引入 了 GIF 图 像 格 式 文件 ,使 
HTML 页 面 第 一 次 有 了 动感 元 素 。 但 更 大 的 变革 来 源 于 1995 年 Java 语言 的 问世 。Java 
语言 天 生 具 备 平台 无 关 的 特点 ,可 在 浏览 器 中 开发 动态 应 用 。1996 年 ,著名 的 Netscape 
浏览 器 在 其 2.0 版 中 增加 了 对 Java Applets 和 JavaScript 的 支持 。Microsoft 的 IE 3.0 
也 在 这 一 年 开始 支持 Java 技术 。 从 此 ， 喜欢 动画 、 喜 欢 交 互 操作 、 喜 欢 容 户 端 应 用 的 开发 
人 员 可 以 用 Java 或 JavaScript 语言 随心 所 欲 地 丰富 HTML 页 面 的 计算 功能 了 。 

JavaScript 语言 在 所 有 客户 端 开 发 技术 中 占有 非常 独特 的 地 位 : 它 是 一 种 以 脚本 方 
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式 运 行 的 ,简化 了 的 Java 语言 ,这 也 是 脚本 技术 第 一 次 在 Web 世界 里 田 露 头角 。 为 了 用 
纯 Microsoft 的 技术 与 JavaScript 抗衡 ,Microsoft 在 1996 年 为 IE 3.0 设计 了 男 一 种 后 来 
也 声名 显赫 的 脚本 语言 一 一 VBScript。 

JavaScript 和 VBScript 是 脚本 语言 的 典型 代表 。 脚 本 语言 是 指 介 于 HTML 和 诸如 
Java、Visual Basic、C++ 等 编程 语言 之 间 的 一 种 特殊 的 语言 ,尽管 它 更 接近 后 者 ,但 它 没 
有 编程 语言 复杂 、 严 并 的 语法 和 规则 。 它 们 可 以 租 入 HTML 文档 之 中 ,与 HTML 语言 
一 起 构成 HTML 文档 。 

脚本 语言 可 以 实现 简单 的 计算 功能 。 因 为 脚本 是 由 一 系列 的 程序 语言 命令 语句 组 
成 ,如 同一 般 的 程序 语言 ,脚本 可 以 定义 变量 并 赋值 给 变量 ,通过 一 系列 命令 定义 一 个 过 
程 或 函数 来 完成 一 个 功能 计算 。 例 如 ,通过 JavaScript 可 以 在 网 页 上 输入 计算 信息 ,不 用 
任何 的 网 络 来 回 传 送 , 即 不 用 传 给 服务 器 (server) 处 理 ,浏览 器 通过 脚本 语言 ,可 直接 将 
计算 的 结果 显示 在 页 面 上 。 计 算 功 能 使 HTML 文档 具有 了 动态 特征 。 


1.3.2 CSS 与 DHTML 


通过 客户 端 让 HTML 页 面 实 现 动 态 特 征 的 还 有 CSS(Cascading Style Sheets) 和 
DHTML(Dynamic HTML) 技 术 。 


1. CSS 


CSS 中 文 称 为 层 释 样式 表单 ,简称 为 样式 表 。 顾 名 思 义 , 它 是 一 种 设计 网 页 样式 的 
技术 。 使 用 CSS 技术 ,可 以 有 效 地 对 页 面 的 布局 .字体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 
精确 的 控制 。1996 年 底 ,W3C 提出 了 CSS 的 建议 标准 ,同年 ,IE 3.0 引入 了 对 CSS 的 支 
持 。CSS 大 大 提高 了 开发 者 对 信息 展现 格式 的 控制 能 力 。1997 年 的 Netscape 4. 0 不 但 
支持 CSS ,而 且 增 加 了 许多 Netscape 公司 自 定 义 的 动态 HTML 标记 ,这 些 标记 在 CSS 
的 基础 上 ,让 HTML 页 面 中 的 各 种 要 素 “ 活 动 * 了 起 来 。 


2. DHT™ML 


1997 年 ,Microsoft 发 布 了 IE 4. 0. 并 将 动态 HTML 标记 、CSS 和 动态 对 象 模型 
(DHTML Object Model) 发 展 成 了 一 套 完 整 、 实 用 、 高 效 的 客户 端 开 发 技术 体系 ， 
Microsoft 称 其 为 DHTML。 同样 是 实现 HTML 页 面 的 动态 效果 ,DHTML 技术 无 需 启 
动 Java 虚拟 机 或 其 他 脚本 环境 ,可 以 在 浏览 器 的 支持 下 ,获得 更 好 的 展现 效果 和 更 高 的 
执行 效率 。 

DHTML 最 显著 的 特点 是 完全 客户 端的 技术 , 它 可 以 直接 通过 浏览 器 中 的 Web 页 实 
现 页 面 与 用 户 之 间 的 交互 。 与 Java、Flash 等 技术 不 同 的 是 ,用 DHTML 编写 的 页 面 不 需 
要 插件 的 支持 就 能 完整 地 实现 其 动态 功能 。 

DHTML 集成 了 HTML CSS .JavaScript 和 VBScript 的 功能 。 它 通过 CSS 样式 表 
可 以 重新 定义 Web 页 面 的 显示 格式 ,弥补 了 HTML 格式 与 布局 的 局 限 性 ,使 页 面 布局 具 
有 更 大 的 灵活 性 。 它 通过 JavaScript 和 VBScript 脚本 语言 增强 页 面 的 应 用 功能 ,改变 网 
页 的 内 容 , 在 Web 页 面 直接 建立 动画 .游戏 和 计算 功能 。 通 过 DHTML 的 数据 绑 定 技术 
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可 以 将 数据 从 数据 源 传递 到 Web 页 中 ,实现 从 服务 器 上 动态 地 返回 数据 。 

DHTML 可 以 说 是 Web 技术 发 展 到 一 定 阶段 ,适应 人 们 迫切 需求 的 一 种 必然 技术 。 
虽然 , 随 着 ASP JSP 的 出 现 ,DHTML 的 许多 功能 逐渐 被 取代 。 但 是 ,ASP、JSP 是 基于 
服务 器 端 执行 的 ,而 DHTML 是 在 客户 端 执 行 的 ,因此 将 二 者 结合 会 得 到 更 加 完美 的 
效果 。 


1.3.3 插件 


为 了 在 HTML 页 面 中 实现 音频 、 视 频 等 更 为 复杂 的 多 媒体 应 用 ,1996 年 的 Netscape 
2.0 成 功 地 引入 了 对 QuickTime 插件 的 支持 ,从 此 ,插件 这 种 开发 方式 迅速 风靡 了 浏览 器 
的 世界 。 

在 Windows 平台 上 ,Microsoft 将 客户 端 应 用 集成 放 在 了 ActiveX (动态 控件 ) 身 上 。 
1996 年 ,IE 3.0 正式 支持 在 HTML 页 面 中 插入 ActiveX 控件 的 功能 ,这 为 其 他 厂商 扩展 
Web 客户 端的 信息 展现 方式 开辟 了 一 条 自由 之 路 。1999 年 ,Realplayer 插件 先后 在 
Netscape 和 IE 浏览 器 中 取得 了 成 功 , 与 此 同时 ,Microsoft 自己 的 媒体 播放 插件 Media 
Player 也 被 预 装 到 了 各 种 Windows 版 本 之 中 。 

最 重要 的 是 Flash 插件 的 问世 : 1990 年 代 初 期 ,Jonathan Gay 在 Future Wave 公司 
开发 了 一 种 名 为 Future Splash Animator 的 二 维 矢量 动画 展示 工具 , 1996 年 ， 
Macromedia 公司 收购 了 Future Wave, 并 将 Jonathan Gay 的 发 明 改 名 为 Flash。 从 此 ， 
Flash 动画 成 了 Web 开发 者 表现 自我 .展示 个 性 的 最 佳 方 式 。 

目前 在 浏览 器 中 使 用 插件 可 以 显示 不 同 格式 的 信息 元 素 。 


1.4 服务 端 技术 


Web 服务 端的 开发 技术 是 在 解决 静态 网 页 维护 难 (文件 数目 多 ) 查询 数据 难 、 修 改 
页 面 难 的 缺陷 中 产生 与 发 展 起 来 的 。 

服务 端 技术 中 最 重要 的 是 动态 网 页 开发 技术 , 即 利 用 后 台数 据 库 服务 器 中 的 数据 动 
态 生成 超 文本 。 要 改变 客户 端 Web 页 的 式样 ,只 需 修改 服务 端 几 个 CSS 文件 ;要 变更 客 
户 端 Web 页 里 的 内 容 , 只 需 对 服务 器 中 的 数据 库 进行 数据 操作 ,不 仅 更 新 速度 快 而 且 可 
以 保持 原 有 的 页 面 风格 不 变 ; 对 于 全 文 检索 等 查询 应 用 ,服务 端 技术 的 优越 性 更 为 突出 。 

通常 所 说 的 动态 也 包括 图 片 的 动态 显示 ,例如 动态 GIF、Java Applets flash 动画 等 ， 
本 书 所 指 的 动态 主要 指 页 面 中 资料 和 数据 的 动态 性 ,包括 如 下 几 方 面 内 容 。 


1. 交互 性 

客户 端的 网 页 会 根据 用 户 的 要 求 与 选择 而 动态 改变 、 产 生 相 应 数据 。 
2. 自动 更 新 

无 需 手 动 更 新 客户 端的 HTML 文档 , 它 能 自动 生成 新 的 页 面 。 
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3. 因 时 因 人 而 变 


当 不 同 的 时 间 不同 的 人 访问 同一 网 址 时 会 产生 不 同 的 页 面 。 
本 节 主 要 介绍 Web 服务 端 技 术 中 的 典型 代表 CGI、PHP、ASP 和 JSP。 


1.4.1 CGI 


最 早 的 Web 服务 器 只 是 简单 地 响应 浏览 器 发 来 的 HTTP 请 求 ,并 将 存储 在 服务 器 
上 的 HTML 文件 返回 给 浏览 器 。 后 来 出 现 了 一 种 名 为 SSI(Server Side Includes) 的 技术 
可 以 让 Web 服务 器 在 返回 HTML 文件 前 ,更 新 HTML 文件 的 某 些 内 容 , 但 其 功能 非常 
有 限 。 

第 一 种 真正 使 服务 器 能 根据 运行 时 的 具体 情况 ,动态 生成 HTML 页 面 的 技术 是 
CGICCommon Gateway Interface) 技 术 ,中 文 称 为 网 关 接 口 。1993 年 ,CGI 1.0 的 标准 草 
案由 NCSA 提出 ,1995 年 ,NCSA 开始 制定 CGI 1. 1 标准 ,1997 年 ,CGI 1. 2 也 被 纳入 了 
议事 日 程 。CGI 技术 允许 服务 端的 应 用 程序 根据 客户 端的 请 求 , 动 态 生 成 HTML 页 面 ， 
这 使 客户 端 和 服务 端的 动态 信息 交换 成 为 了 可 能 。 随 着 CGI 技术 的 普及 ,聊天 室 、 论 坛 、 
电子 商务 ,信息 查询 ,全文 检索 等 各 式 各 样 的 Web 应 用 鞍 抛 兴起, 人们 终于 可 以 享受 到 信 
息 检索 信息 交换 、 信 息 处 理 等 更 为 便捷 的 信息 服务 了 。Web 开始 有 了 动态 网 页 开发 
技术 。 

不 过 CGI 比较 复杂 ,学 起 来 有 些 困难 ,不 仅 要 懂得 CGI 的 工作 原理 ,还 要 是 个 编程 高 
手 。 因 此 ,出 现 了 PHP、ASP、JSP 等 服务 器 端的 动态 网 页 开发 技术 。 


1.4.2 PHP 


PHP 是 英文 Hypertext PreProcessor 或 Personal Home Page Tools 的 缩写 ,中 文 称 
为 超级 文本 预 处 理 语言 。 与 CGI 程序 不 同 ,PHP 语言 将 HTML 代码 和 PHP 指令 合成 
为 完整 的 服务 端 动态 页 面 , Web 应 用 的 开发 者 可 以 用 一 种 更 加 简便 、 快 捷 的 方式 实现 
Web 的 动态 功能 。 

PHP 是 Rasmus Lerdorf 在 1994 年 秋天 构思 出 来 的 ,开始 的 目的 只 是 用 来 与 浏览 他 
主页 在 线 简 历 的 人 保持 联系 。 第 一 个 交付 用 户 使 用 的 版 本 是 在 1995 年 初 发 行 的 ,初始 时 
它 仅 包括 一 个 懂得 几 条 宏 指令 的 分 析 引 擎 和 一 组 用 于 主页 信息 反馈 的 工具 (一 个 留言 德 
与 一 个 计数 器 ) 。1995 年 年 中 ,Rasmus 重 写 了 这 个 工具 软件 ,并 取 名 为 PHP/FI。FI 来 
源 于 他 写 的 另外 一 个 HTML 表单 集成 数据 的 软件 包 。 他 把 个 人 主页 工具 与 表单 集成 工 
具 合 并 在 一 起 ,并 加 入 了 对 MySQL 数据 库 的 支持 程序 ,构成 了 PHP/FI。 此 后 ,PHP/FI 
便 以 一 种 令 人 惊奇 的 速度 传播 开 来 ,人 们 开始 大 量 使 用 它 编写 程序 。 

无 法 确切 地 统计 它 的 使 用 范围 ,根据 估计 在 1996 年 底 , 世 界 上 已 经 有 至 少 15000 个 
站 点 在 使 用 PHP/FI。1997 年 年 终 这 个 数字 已 经 增长 到 超过 50000 个 站 点 。1997 年 年 
底 ,PHP 的 发 展 出 现 了 一 个 重大 的 转折 ,这 就 是 PHP 的 开发 从 Rasmus 个 人 的 爱好 升级 
到 一 群 程序 员 们 有 组 织 的 工作 。 再 后 来 ,这 个 工具 软件 被 Zeev Suraski 和 Andi Gutmans 
重 写 , 通 过 这 次 全 面 的 重 写 ,大 量 PHP/FI 的 功能 被 移植 到 PHP3 中 ,并 且 成 为 7 了 PHP 
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3.0 的 基本 雏形 。 到 1998 年 年 底 , 已 经 有 大 量 的 商业 化 产品 ,根据 NetCraft 网 站 估计 的 
保守 数据 ,PHP 已 经 被 世界 上 150000 个 站 点 所 采用 。 在 网 上 经 常 可 以 看 到 以 . php 作为 
后 缀 名 的 Web 页 。 

PHP 有 以 下 特性 。 

(1) 开放 的 源 代码 : 所 有 的 PHP 源 代码 事实 上 都 可 以 得 到 。 

(2) 免费 : PHP 是 一 种 免费 软件 , 常 与 免费 的 Web 服务 器 软件 Apache 和 免费 数据 
库 软件 MySQL 配合 使 用 于 Linux 平 台 上 ,具有 和 较 高 的 性 能 价格 比 。 

(3) 基于 服务 器 端 : 由 于 PHP 是 运行 在 服务 器 端的 ,即使 再 多 的 用 户 , 再 复杂 的 程 
序 也 不 会 影响 运行 的 速度 。 

(4) 跨 平台 : PHP 可 以 运行 在 UNIX、Linux、Windows 环境 。 

(5) 做 入 HTML: PHP 语言 被 舱 入 在 HTML 中 ,容易 理解 。 

(6) 简单 的 语言 : PHP 坚持 以 脚本 语言 为 主 ,与 Java 和 C++ 标准 的 程序 设计 语言 不 
同 , 容 易学 习 。 

(7) 效率 高 : PHP 消耗 相当 少 的 系统 资源 。 

(8) 图 像 处理 : 用 PHP 可 以 动态 创建 图 像 。 

(9) 强大 的 数据 库 支持 : 目前 其 支持 范围 覆盖 了 包括 Oracle、Sybase、Microsoft 
SQL MySQL Informix、Solid dBase\ODBC 、UNIX dbm、PostgreSQL Adabas D 等 在 内 
的 大 多 数 常见 数据 库 。 使 用 它 编写 一 个 含有 数据 库 功 能 的 网 页 程序 十 分 简单 。 


1.4.3 ASP 


1996 年 ,Microsoft 借鉴 PHP 的 思想 ,在 其 Web 服务 器 IIS 3.0 中 引入 了 ASP 技术 。 
ASP 是 英文 Active Server Page 的 缩写 ,中 文 称 为 动态 服务 网 页 。ASP 使 用 的 脚本 语言 
是 VBScript 和 JavaScript。 借 助 Microsoft Visual Studio 等 开发 工具 在 市 场 上 的 成 功 ， 
ASP 迅速 成 为 了 Windows 系统 下 Web 服务 端的 主流 开发 技术 。 

ASP 与 HTML 有 什么 区 别 呢 ? 简单 地 说 ,ASP 是 对 Web 服务 器 功能 的 增强 ,ASP 
改变 了 HTML 只 是 浏览 器 从 Web 服务 器 下 载 Web 页 面 的 工作 方式 。ASP 不 仅 可 以 让 
客户 端的 浏览 器 从 服务 器 取得 Web 页 ,还 可 以 让 Web 服务 器 随时 接收 来 自 客户 端 浏览 
器 发 来 的 信息 ,根据 接收 到 的 用 户 信息 ,进行 数据 处 理 , 修 改 Web 服务 器 中 的 网 页 内 容 ， 
再 将 修改 后 的 Web 页 返回 到 客户 端 浏览 器 。 

ASP 有 以 下 特点 : 

(1) ASP 可 以 创建 基于 Web 的 应 用 程序 。 

(2) ASP 由 VBScript、JavaScript 等 简单 易 懂 的 脚本 语言 命令 HTML 标记 和 
ActiveX 组 件 组 合 而 成 。 

(3) 可 使 用 普通 的 文本 编辑 器 编写 ASP 文件 ,例如 Windows 的 记事 本 、Word 等 。 

(4) ASP 文件 与 浏览 器 无 关 , 客 户 端 只 要 使 用 可 浏览 HTML 语言 的 浏览 器 , 即 可 浏 
览 ASP 所 设计 的 网 页 。 

(5) ASP 文件 无 须 编译 ,其 所 使 用 的 脚本 语言 (VBScript、JavaScript) 均 可 以 在 Web 
服务 器 端 直接 执行 。 用 户 端 的 浏览 器 不 需要 理会 这 些 脚本 语言 。 
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(6) 提高 了 程序 的 安全 性 ,ASP 的 源 程序 不 会 被 传 到 客户 浏览 器 ,因而 可 以 避免 所 写 
的 源 程序 被 他 人 到 窃 。 在 客户 端 看 到 的 是 ASP 页 面 是 ASP 文件 的 执行 结果 。 

(7) 可 创建 具有 交互 功能 的 Web 页 面 。 

(8) ASP 可 以 与 多 种 数据 库 建立 连接 ,在 ASP 应 用 程序 中 可 以 方便 地 使 用 修改 、 添 
加 数据 库 中 的 数据 。 


1.4.4 JSP 


Sun 公司 并 没有 因为 有 了 JavaScript、Java Applets 技术 而 停止 不 前 ,1997 年 ,Sun 公 
司 提供 了 Servlet 技术 , 它 是 对 支持 Java 的 服务 器 的 扩充 。 它 的 主要 用 途 是 扩展 Web 服 
务 器 的 功能 ,提供 安全 的 、 可 移植 的 .易于 使 用 的 CGI 替代 品 。 它 是 一 种 动态 加 载 的 模 
块 , 可 以 为 来 自 Web 服务 器 的 请 求 提供 服务 。 

1998 年 ,Sun 公司 诞生 了 专门 制作 Web 动态 网 页 的 技术 JSP。JSP 是 英文 Java 
Server Pages 的 缩写 ,中 文 称 为 Java 服务 网 页 。JSP 是 由 Sun Microsystems 公司 倡导 、 
许多 公司 参与 一 起 建立 的 一 种 动态 网 页 技术 标准 ,其 在 动态 网 页 的 建设 中 有 着 强大 而 特 
别 的 功能 。 在 创建 动态 内 容 页 面 时 JSP 提供 了 一 个 满足 下 列 条 件 的 解决 方案 。 

(1) 能 够 在 任何 Web 或 应 用 程序 服务 器 上 运行 ; 

(2) 可 以 将 应 用 程序 逻辑 和 页 面 显示 分 离 ; 

(3) 能 够 快速 地 开发 和 测试 ; 

(4) 能 够 简化 开发 基于 Web 的 交互 式 应 用 程序 的 过 程 。 

JSP 技术 标准 (规范 ) 是 Web 服务 器 、 应 用 服务 器 、 交 易 系 统 、 以 及 开发 工具 供应 商 间 
广泛 合作 的 结果 。 在 开发 JSP 技术 标准 (规范 ) 的 过 程 中 ,Sun 公司 与 许 许 多 多 主要 的 
Web 服务 器 、 应 用 服务 器 和 开发 工具 供应 商 ,以 及 各 种 各 样 富有 经 验 的 开发 团体 进行 合 
作 , 其 结果 是 找到 了 一 种 为 应 用 和 页 面 开 发 人 员 使 用 的 可 移植 性 强 、 易 用 的 JSP 开发 
认 法 。 

在 Sun 正式 发 布 JSP 之 后 ,这 种 新 的 Web 应 用 开发 技术 很 快 引起 了 人 们 的 关注 。 
JSP 为 创建 高 度 动态 的 Web 应 用 提供 了 一 个 独特 的 开发 环境 。 

JSP 有 如 下 特点 。 

1) 将 内 容 的 生成 和 显示 进行 分 离 

使 用 JSP 技术 ,可 以 更 明确 地 进行 分 工 , Web 页 面 开 发 人 员 可 以 使 用 HTML 或 者 
XML 标识 来 设计 和 格式 化 最 终 页 面 。JSP 程序 员 使 用 JSP 标识 或 者 脚本 来 设计 页 面 上 
的 动态 内 容 ( 内 容 是 根据 请 求 变 化 的 .例如 请 求 账 户 信息 或 者 特定 的 一 瓶 酒 的 价格 将 显示 
不 同 的 页 面 )。 

2) 生成 可 重用 的 组 件 

绝 大 多 数 JSP 页 面 依赖 于 可 重用 的 , 跨 平台 的 组 件 ( 例 如 JavaBeans) 和 执行 特殊 任 
务 的 Enterprise JavaBeans 组 件 来 执行 应 用 程序 所 要 求 的 更 为 复杂 的 处 理 。 开 发 人 员 能 
够 共享 和 交换 执行 普通 操作 的 组 件 ,或 者 使 得 这 些 组 件 为 更 多 的 使 用 者 或 客户 团体 所 使 
用 。 基 于 组 件 的 方法 加 速 了 总 体 开发 过 程 .并 且 使 得 各 种 组 织 在 他 们 现 有 的 技能 和 优化 
结果 的 开发 努力 中 得 到 平衡 。 
mG» 


3) 采用 标识 简化 页 面 开发 

Web 页 面 开 发 人 员 不 会 都 是 熟悉 脚本 语言 的 编程 人 员 。JSP 技术 封装 了 许多 功能 ， 
这 些 功能 是 在 易 用 的 与 JSP 相关 的 XML 标识 中 进行 动态 内 容 生 成 时 所 需要 的 。 标 准 
的 JSP 标识 能 够 访问 和 实例 化 JavaBeans 组 件 , 设 置 或 检索 组 件 属性 ,下 载 Applet, 以 及 
执行 用 其 他 方法 更 难于 编码 和 耗 时 的 功能 。 

4) 可 扩展 性 

通过 开发 定制 化 标识 库 ,JSP 技术 是 可 以 扩展 的 。 第 三 方 开发 人 员 和 其 他 人 员 可 以 
为 常用 功能 创建 自己 的 标识 库 。 这 使 得 Web 页 面 开 发 人 员 能 够 使 用 熟悉 的 工具 和 如 同 
标识 一 样 执行 特定 功能 的 构件 来 工作 。 

5) 具有 Java 技术 的 所 有 优势 

由 于 JSP 内 置 的 脚本 语言 是 Java 编程 语言 ,而 且 所 有 的 JSP 页 面 都 被 编译 成 为 Java 
字 节 代码 ,所 以 JSP 具有 Java 技术 的 所 有 优势 ,包括 健壮 性 和 安全 性 。 所 以 ,大 型 商业 网 
站 通常 都 使 用 JSP 进行 开发 。 

6) 一 次 编写 ,各 处 运行 

作为 Java 平台 的 一 部 分 ,JSP 拥有 Java 编程 语言 一 次 编写 ,各 处 运行 的 特点 。 随 着 
越 来 越 多 的 供应 商 将 JSP 支持 添加 到 他 们 的 产品 中 ,可 以 任意 选择 服务 器 和 工具 ,更 改 
工具 或 服务 器 并 不 影响 当前 的 JSP 应 用 程序 。 

JSP 很 好 地 结合 了 Servlet 技术 , 它 同 时 拥有 类 似 CGI 程序 的 集中 处 理 功 能 和 类 似 
PHP 的 HTML 嵌入 功能 ,此 外 ,Java 的 运行 时 编译 技术 也 大 大 提高 了 Servlet 和 JSP 的 
执行 效率 ,Servlet 和 JSP 也 是 J2EE 平台 的 核心 技术 。 


1.5 企业 级 开发 平台 


服务 端 开发 技术 的 日 益 完 善 使 开发 复杂 的 Web 应 用 成 为 了 可 能 。 在 电子 商务 活动 
中 ,为 了 适应 企业 级 应 用 开发 的 各 种 复杂 需求 ,为 了 给 最 终 用 户 提供 更 可 靠 、 更 完善 的 信 
息 服务 ,两 个 最 重要 的 企业 级 开发 平台 一 一 J2EE 和 . NET 在 2000 年 前 后 分 别 诞生 于 
Java 和 Windows 阵营 ,它们 在 企业 级 Web 开发 领域 展开 了 激烈 的 竞争 。 这 种 竞争 关系 
促使 了 Web 开发 技术 以 前 所 未 有 的 速度 提高 和 跃进 。 

本 节 的 内 容 主 要 介绍 企业 级 Web 开发 平台 中 的 典型 代表 ASP. NET 和 J2EE。 


1.5.1 Microsoft 公司 的 . NET 


Microsoft 的 . NET 平台 是 一 个 强调 多 语言 间 交 互 的 通用 运行 环境 。2001 年 ， 
ECMA(European Computer Manufactures Association ,欧洲 计算 机 制造 商 协会 ) 通 过 了 
Microsoft 提交 的 C# 语 言 和 CLI 标准 ,这 两 个 技术 标准 构成 了 . NET 平台 的 基础 ,它们 
于 2003 年 成 为 了 ISO(International Organization for Standardization , 国际 标准 化 组 织 ) 
的 国际 标准 。2002 年 ,Microsoft 正式 发 布 . NET Framework 和 Visual Studio . NET 开 
发 环境 。 

在 .NET 发 布 之 前 ,有 许多 Windows 平台 的 Web 开发 者 就 利用 Beta 版 本 开发 Web 
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应 用 了 。 因 为 .NET 平台 及 相关 的 开发 环境 不 但 为 Web 服务 端 应 用 提供 了 一 个 支持 多 
种 语言 的 .通用 的 运行 平台 ,而 且 还 引入 了 ASP. NET 这 样 一 种 全 新 的 Web 开发 技术 。 

ASP. NET 超越 了 ASP 的 局 限 ,可 以 使 用 VB. NET、C# 等 编译 型 程序 设计 语言 , 支 
持 Web Form.、. NET Server Control、 ADO. NET 等 高 级 特性 。 

Microsoft 公司 推出 的 ASP. NET 不 是 ASP 的 简单 升级 ,而 是 Microsoft 推出 的 新 一 
代 Active Server Pages。ASP. NET 是 . NET 的 一 部 分 。 在 许多 方面 ,ASP. NET 与 ASP 
有 着 本 质 的 不 同 。ASP. NET 完全 基于 模块 与 组 件 ,具有 更 好 的 可 扩展 性 与 可 定制 性 , 数 
据 处 理 方面 引入 了 许多 新 技术 , 正 是 这 些 具 有 革新 意义 的 新 特性 ,让 ASP. NET 远 远 超 
越 了 ASP, 同 时 也 提供 给 Web 开发 人 员 更 好 的 灵活 性 ,有 效 缩短 了 Web 应 用 程序 的 开发 
周期 。 

ASP. NET 有 以 下 特点 : 

1) 执行 效率 大 幅 提高 

ASP.NET 是 把 基于 通用 语言 的 程序 在 服务 器 上 运行 ,与 以 前 的 ASP 即时 解释 程序 
不 同 , 它 是 将 程序 在 服务 器 端 首 次 运行 时 进行 编译 ,这 样 的 执行 效果 ,当然 比 一 条 一 条 地 
解释 快 很 多 。 

2) 有 开发 工具 支持 

ASP. NET 构架 可 以 用 Microsoft 公司 最 新 的 产品 Visual Studio. NET 开发 工具 进 
行 开发 ,WYSIWYG(CWhat You See Is What You Get 所 见 即 所 得 ) 的 编辑 方式 可 加 快 程 
序 的 开发 过 程 。 

3) 支持 程序 语言 

ASP. NET 现在 支持 C#(C++ 和 Java 的 结合 体 ) 与 VB 语言 。 不 像 ASP 只 是 支持 
脚本 语言 ,所 以 功能 更 强大 。 

4) 可 管理 性 

ASP. NET 使 用 一 种 字符 基础 的 ,分 级 的 配置 系统 .使 服务 器 环境 和 应 用 程序 的 设置 
更 加 简单 。 因 为 配置 信息 都 保存 在 简单 文本 中 ,新 的 设置 可 能 不 需要 启动 本 地 的 管理 员 
工具 就 可 以 实现 。 一 个 ASP. NET 的 应 用 程序 在 一 台 服 务 器 系统 的 安装 只 需 简单 拷贝 
一 些 必须 的 文件 ,不 需要 系统 重新 启动 。 

5) 多 处 理 器 环境 的 可 靠 性 

ASP. NET 已 经 被 刻意 设计 成 为 一 种 可 以 用 于 多 处 理 器 的 开发 工具 , 它 在 多 处 理 器 
的 环境 下 用 特殊 的 无 颖 连接 技术 .将 大 大 提高 运行 速度 。 即 使 现在 的 ASP. NET 应 用 软 
件 是 为 一 个 处 理 器 开发 的 ,将 来 多 处 理 器 运行 时 不 需要 任何 改变 都 能 提高 它们 的 效能 ,而 
现在 的 ASP 却 做 不 到 这 一 点 。 

6) 自 定义 性 和 可 扩展 性 

ASP. NET 设计 时 考虑 了 让 网 站 开发 人 员 可 以 在 自己 的 代码 中 自己 定义 plug-in 的 
模块 ,加 入 自己 定义 的 任意 组 件 。 


1.5.2 Sun 公司 的 J2EE 


J2EE 是 英文 Java 2 Platform Enterprise Edition 的 缩写 ,中 文 称 为 Java 2 平台 企业 
jas . 


版 ,J2EE 是 纯粹 基于 Java 的 解决 方案 。 

1998 年 ,Sun 发 布 了 EJB 1. 0 标准 。EJB(Enterprise JavaBean) 是 Sun 的 服务 器 端 组 
件 模 型 ,最 大 的 用 处 是 部 署 分 布 式 应 用 程序 ,凭借 Java 跨 平台 的 优势 ,用 EJB 技术 部 署 的 
分 布 式 系统 可 以 不 限于 特定 的 平台 。EJB 为 企业 级 应 用 中 必 不 可 少 的 数据 封装 .事务 处 
理 、 交 易 控 制 等 功能 提供 了 良好 的 技术 基础 。 

1999 年 ,Sun 正式 发 布 了 包含 三 大 核心 技术 Servlet、JSP 和 EJB 的 J2EE 1.0 版 本 。 
紧 接 着 ,遵循 J2EE 标准 ,为 企业 级 应 用 提供 支撑 平台 的 各 类 应 用 服务 软件 开始 出 现 ， 
IBM 的 WebSphere、BEA 的 WebLogic 都 是 这 一 领域 里 最 为 成 功 的 商业 软件 平台 。 到 
2003 年 时 ,Sun 的 J2EE 版 本 已 经 升级 到 了 1.4 版 ,其 中 三 个 关键 组 件 的 版 本 也 演进 到 了 
Servlet 2.4、 JSP 2.0 和 EJB 2.1。 至 此 ,J2EE 体系 及 相关 的 软件 产品 已 经 成 为 了 Web 服 
务 端 开发 的 一 个 强 有 力 的 支撑 环境 。 

J2EE 是 使 用 Java 进行 企业 开发 的 一 套 扩展 规范 , 它 提供 基于 组 件 设 计 、 开 发 、 部 署 
和 管理 企业 应 用 的 解决 方案 。J2EE 具有 许多 优点 ,例如 "一 次 编译 .随处 运行 ”的 跨 平台 
特性 方便 高 效 的 数据 库 提 供 无 颖 连接 的 技术 JDBC(Java Data Base Connectivity,Java 
数据 库 连 接 )、 能 够 在 Internet 应 用 中 确保 数据 完整 性 的 安全 模式 以 及 支持 多 线程 技术 
等 ,同时 还 针对 Servlet、JSP、EJB、JMS、JTS/JTA JCAT 和 XML 等 技术 提供 了 全 面 的 支 
持 。J2EE 已 建立 了 一 套 能 够 使 企业 级 应 用 开发 者 缩短 软件 产品 开发 周期 的 标准 架构 
体系 。 

事实 上 ,J2EE 已 成 为 企业 级 开发 的 工业 标准 和 主流 平台 。J2EE 为 建立 具有 高 可 用 
性 、 高 可 扩充 性 、 易 维护 性 的 企业 级 系统 提供 了 完美 的 机 制 和 架构 模型 。 在 J2EE 提供 的 
统一 开发 平台 下 ,可 以 大 大 降低 开发 多 层 应 用 的 成 本 和 复杂 性 ,对 于 需要 获得 高 可 用 性 、 
高 安全 性 以 及 高 可 扩充 性 软件 服务 而 又 缺乏 资金 的 企业 来 说 ,J2EE 的 中 间 层 集成 框架 完 
全 可 以 胜任 并 满足 其 要 求 。 同 时 ,J2EE 自身 具备 的 完备 的 目录 服务 支持 、 高 度 的 安全 机 
制 ,高效 的 性 能 展现 等 众多 优势 技术 ,为 企业 平滑 集成 已 有 应 用 系统 发 挥 了 巨大 作用 。 

基于 J2EE 的 企业 级 应 用 系统 ,不 受 任 何 特定 操作 系统 .网络 环境 、 硬 件 平台 的 束缚 。 
应 用 系统 可 开发 并 部 署 在 异 构 的 环境 中 ,并 能 确保 系统 的 可 移植 性 。 因 此 ,只 要 符合 
J2EE 规范 的 系统 开发 一 次 即 可 部 署 到 各 种 操作 系统 平台 和 网 络 平台 上 。J2EE 作为 长 期 
的 性 能 稳定 的 企业 级 应 用 系统 平台 ,能 保障 7X24 小 时 的 不 间断 服务 ,以 满足 企业 客户 、 
合作 伙伴 的 需要 ,是 企业 理想 的 运行 平台 也 是 Internet 全 球 化 发 展 的 客观 必然 要 求 。 
J2EE 高 伸缩 性 的 特点 在 如 今 “ 随 需 应 变 ”(IBM 公司 2002 年 底 提 出 ) 电 子 商务 战略 大 行 
其 道 的 时 代 , 做 出 了 卓越 贡献 。J2EE 采用 负载 平衡 策略 ,使 系统 软 硬 件 资源 利用 率 及 性 
能 表现 最 大 化 ,消除 了 系统 中 的 瓶颈 。 人 允许 多 台 服 务 器 集成 部 署 ,实现 可 高 度 伸缩 的 系 
统 , 在 保存 企业 现 有 IT 资产 减少 重复 性 投入 的 同时 也 满足 了 未 来 商业 应 用 的 需要 。 


1.6 Web 应 用 模型 与 开发 框架 


2000 年 以 后 , 随 着 Web 应 用 的 日 益 复 杂 , 人 们 逐渐 意识 到 ,单纯 依靠 某 种 技术 多 半 
无 法 达到 快速 开发 .快速 验证 和 快速 部 署 的 最 佳境 界 。 研 究 者 开始 尝试 着 将 已 有 的 Web 
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开发 技术 综合 起 来 ,形成 完整 的 应 用 模型 或 开发 框架 ,以 此 满足 各 种 复杂 的 应 用 需求 。 

Microsoft 在 客户 端的 应 用 技术 集成 方面 走 在 了 最 前 面 。1998 年 时 Microsoft 推出 
的 Windows 98 就 可 以 在 桌面 上 集成 Web 页面, 这 实际 上 是 将 资源 管理 器 和 Web 浏览 器 
的 功能 有 效 地 结合 了 起 来 。2000 年 后 ,Microsoft 陆续 推出 了 MSN Explorer 和 与 之 相关 
的 MSN 在 线 服务 。 这 一 应 用 模型 将 Web 浏览 ,视频 点 播 、 邮 件 处 理 、 网 上 游戏 ,在 线 聊 
天 等 许多 种 用 户 常用 的 Web 功能 集成 在 了 一 个 统一 的 界面 中 。 从 信息 利用 的 角度 看 ， 
MSN 试图 让 用 户 在 一 个 最 和 舒适 的 环境 中 获取 足够 的 信息 。 另 一 个 与 客户 端 应 用 技术 集 
成 相关 的 例子 是 搜索 引擎 Google 在 2003 年 展示 给 大 家 的 Google 工具 栏 功能 。 安 装 
Google 工具 栏 之 后 的 下 浏览 器 将 信息 浏览 和 信息 检索 有 机 地 结合 起 来 ,这 种 小 小 的 功 
能 改进 确实 是 对 用 户 的 体贴 和 帮助 。 

在 Web 服务 端 ,2000 年 以 后 出 现 了 几 种 主要 的 技术 融合 方式 。 首 先 , 越 来 越 多 的 
Web 开发 环境 开始 支持 MVC(CModel-View-Controller) 的 设计 模型 ,为 开发 者 提供 全 套 
的 开发 框架 。 实 际 上 ,J2EE 和 . NET 平台 本 身 就 是 这 种 开发 框架 的 典型 代表 。 其 次 , 门 
户 服 务 (Portal Server) 和 Web 内 容 管理 (Web Content Management) 在 最 近 几 年 里 成 为 
了 应 用 集成 的 重点 模型 。 这 两 种 应 用 模型 可 以 直接 为 开发 者 或 最 终 用 户 提供 构建 Web 
应 用 的 高 级 平台 ,可 以 让 Web 开发 和 信息 发 布 工作 大 为 简化 。 在 商业 软件 领域 ,这 一 类 
应 用 的 例子 包括 Microsoft 的 SharePoint、IBM 的 WebSphere Portal 、FileNet 的 Web 
Content Manager 等 。 开 源 项 目 在 Web 开发 框架 和 应 用 模型 方面 表现 得 非常 积极 ， 
Struts、Jetspeed、jPortlet、Cocoon、Lenya、XOOPS, Spring 等 都 是 开源 世界 里 与 MVC 开 
发 框架 .门户 服务 和 Web 内 容 管理 相关 的 优秀 解决 方案 。 


1.7 可 扩展 标记 语言 一 一 XML 


如 果 说 HTMEL 语言 给 Web 世界 赋予 了 无 限 生 机 的 话 , 那 么 ,XML 语言 的 出 现 大 概 
就 可 以 算 成 是 Web 的 一 次 新 生 了 。 按 照 伯 纳 斯 李 的 说 法 ,Web 是 一 个 “信息 空间 ”。 
HTML 语言 具有 较 强 的 表现 力 , 但 也 存在 结构 过 于 灵活 、 语 法 不 规范 的 弱点 。 当 信息 以 
HTML 语言 的 面貌 出 现时 ,Web 这 个 信息 空间 是 杂乱 无 章 、 没 有 秩序 的 。 为 了 让 Web 世 
界 里 的 所 有 信息 都 有 章 可 循 、\ 有 法 可 依 , 需 要 一 种 更 为 规范 、 更 能 够 体现 信息 特点 的 语言 。 
所 以 ,出 现 了 XML(eXtensible Markup Language, 可 扩展 标记 语言 ) 。 

1996 年 ,W3C 在 SGML 语言 的 基础 上 ,提出 了 XML 语言 草案 。1998 年 , W3C 正式 
发 布 了 XML 1.0 标准 。XML 语言 对 信息 的 格式 和 表达 方法 做 了 最 大 程度 的 规范 ,应 用 
软件 可 以 按照 统一 的 方式 处 理 所 有 XML 信息 。 这 样 一 来 ,信息 在 整个 Web 世界 里 的 共 
享 和 交换 就 有 了 技术 上 的 保障 。HTML 语言 关心 的 是 信息 的 表现 形式 ,而 XML 语言 关 
心 的 是 信息 本 身 的 格式 和 数据 内 容 。 从 这 个 意义 上 说 ,XML 语言 不 但 可 以 将 客户 端的 
信息 展现 技术 提高 到 一 个 新 的 层次 ,而 且 可 以 显著 提高 服务 端的 信息 获取 、 生 成 .发 布 和 
共享 能 力 。 为 了 将 XML 信息 转换 为 HTML 等 不 同 的 信息 展现 形式 ,1999 年 ,W3C 制定 
了 XSLT(eXtensible Stylesheet Language Transformation ,扩展 样式 表 转 换 语 言 ) 标 准 ， 
XSLT 是 专门 用 来 转换 XML 文档 结构 的 语言 。 同 一 年 ,IE 5.0 增加 了 对 XML 和 XSLT 
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的 支持 。 现 在 ,网 站 的 开发 者 可 以 直接 使 用 XML 语言 发 布 信息 。 
1.8 Web 开发 技术 的 未 来 


未 来 Web 会 是 什么 样子 呢 ? W3C 是 这 样 回答 的 ,未 来 的 Web 是 语义 化 的 Web 
(Semantic Web) 。 今 天 的 Web 可 以 自如 地 生成 、 传 递 和 展现 各 式 各 样 的 信息 ,但 它 还 只 
是 一 个 信息 的 “容器 ”, 很 难 揭示 出 信息 本 身 的 内 容 和 特性 。 未 来 的 语义 化 Web 是 一 种 懂 
得 信息 内 容 的 Web, 是 真正 的 “信息 管理 员 ”。 

从 技术 角度 看 ,XML 语言 统一 了 信息 的 表达 方式 ,还 不 能 揭示 信息 的 内 容 。1998 年 ， 
W3C 和 一 些 研 究 机 构 开 始 对 元 数据 (Metadata) 进 行 研究 。 元 数据 是 描述 数据 的 数据 ,可 
以 揭示 信息 的 内 容 特 性 。1999 年 , NetScape 提出 的 RSS(Rich Site Summary) 建 议 标 准 
是 用 元 数据 技术 描述 新 闻 等 信息 内 容 的 第 一 次 尝试 。1999 年 ,W3C 的 研究 小 组 提出 了 
RDF(Resource Description Framework) 标 准 草案 。RDF 在 XML 语法 的 基础 上 ,规定 了 
元 数据 的 存储 结构 和 相关 的 技术 标准 。 使 用 RDF 语言 ,可 以 用 统一 的 、 可 交换 的 格式 揭 
示 出 信息 本 身 的 各 种 特性 。2001 年 ,W3C 又 开始 着 手 制定 OWL(OWL Web Ontology 
Language) 标 准 。OWL 语言 也 是 一 种 符合 XML 标准 的 语言 , 它 比 RDF 又 前 进 了 一 步 ， 
可 以 更 加 深入 、 细 致 地 描述 信息 内 容 。 在 RDF 和 OWL 语言 的 帮助 下 ,能 让 Web 上 的 信 
息 内 容 变 得 更 容易 理解 、 更 便于 交换 和 共享 。2003 年 ,W3C 成 立 了 语义 化 Web Service 
研究 小 组 (Semantic Web Services Interest Group) ,研究 在 Web Service 中 加 入 语义 技术 
的 相关 问题 。2004 年 2 月 ,W3C 宣布 RDF 和 OWL 标准 正式 成 为 W3C 的 建议 方案 ,这 
标志 着 语义 化 Web 的 大 厦 已 经 破土 动工 。 

随 着 语义 化 Web 的 诞生 和 发 展 ,Web 开发 技术 也 必 将 经 历 更 为 重大 的 变革 。 可 以 
预见 的 是 ,在 未 来 的 时 间 里 ,还 会 有 许多 新 的 开发 技术 或 开发 平台 出 现 。 从 静态 技术 到 动 
态 技术 ,从 开发 平台 到 应 用 模型 ,从 传统 Web 到 语义 化 Web ,等 等 ,为 了 让 更 多 的 人 获得 
更 有 价值 的 信息 服务 , Web 开发 者 们 可 能 还 会 经 历 一 次 又 一 次 的 技术 浪潮 ,将 会 面临 更 
为 严峻 的 技术 挑战 与 更 多 的 机 遇 。 


1.9 ”学习 的 准备 


本 节 主 要 介绍 本 书 将 带领 读者 学 什么 ,学 习 目 标 是 什么 ,学 习 中 应 该 准备 什么 工具 。 


1.9.1 学 什么 


以 上 介绍 了 Web 的 基本 概念 ,概要 介绍 了 Web 开发 领域 中 使 用 的 一 些 典 型 技术 , 通 

过 上 面 各 节 的 内 容 可 以 发 现 Web 虽然 历史 不 长 ,但 其 开发 技术 类 型 却 很 多 。 如 何在 有 限 

的 时 间 内 掌握 最 基本 的 Web 开发 技术 呢 ? 这 就 是 本 书 要 解决 的 问题 ,本 书 将 带领 读者 使 

用 HTML、JavaScript、CSS、XML.、JSP 几 种 基本 的 Web 开发 技术 ,将 理论 知识 与 上 机 实 

践 相 结合 ,学习 目 标 是 融会 贯通 所 学 的 基本 Web 开发 技术 开发 出 一 个 具体 的 Web 网 站 ， 
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为 今后 学 习 其 他 Web 开发 技术 打下 基础 。 
1.9.2 Web 开发 工具 


要 学 习 HTML 、 JavaScript\CSS、XML JSP 语言 ,意味 着 要 学 习 编 写 不 同类 型 的 
Web 页 文件 。 要 开发 一 个 Web 网 站 ,意味 着 要 开发 一 系列 相关 的 Web 页 文件 。 因 此 ,在 
学 习 Web 开发 技术 之 前 ,需要 了 解 并 选择 编写 Web 页 的 工具 ,选择 好 学 习 工 具 可 以 起 到 
事半功倍 的 作用 。 

编写 Web 页 最 简单 的 工具 是 记事 本 。 不 过 ,现在 市 面 上 已 经 有 很 多 Web 页 编辑 器 ， 
它们 使 编制 Web 页 的 工作 变 得 既 简 单 又 容易 ,例如 FrontPage、Dreamweaver 等 。Word 
中 也 有 编制 Web 页 的 功能 ,如 果 用 它 编辑 页 面 也 是 很 方便 的 。 下面 介绍 几 种 典型 的 
Web 开发 工具 。 


1. FrontPage 


FrontPage 是 优秀 的 Web 开发 编辑 器 ,可 以 方便 、 快 捷 地 编辑 Web 页 。 在 编辑 器 中 
提供 了 所 见 即 所 得 、 手 工 编辑 HTML 和 预览 Web 页 三 种 编辑 模式 。 

它 是 一 个 非常 简单 实用 的 网 页 编辑 软件 ,用 它 可 以 非常 快速 地 编辑 好 一 个 网 页 ,特别 
适用 于 第 一 次 做 网 页 的 人 。FrontPage 还 可 以 做 简单 的 多 媒体 课件 .企业 策划 书 .产品 演 
示 说 明 书 等 , 它 具 有 上 和 手 快 ,易学 、 易 用 的 特点 ,是 初学 者 理想 的 制作 网 页 的 集成 工具 。 


2. Dreamweaver 


Dreamweaver 是 美国 Macromedia 公司 开发 的 集 Web 页 制作 和 管理 网 站 于 一 体 的 
所 见 即 所 得 Web 页 编辑 器 , 它 是 第 一 套 针 对 专业 Web 页 设计 师 的 视觉 化 Web 页 开发 工 
具 , 利 用 它 可 以 轻而易举 地 制作 出 跨越 平台 和 跨越 浏览 器 的 充满 动感 的 Web 页 。 是 目前 
优秀 的 制作 网 页 的 集成 工具 之 一 。 


3. TopPage 


IBM 推出 的 NetObjects TopPage 是 一 种 既 适 合 专业 网 络 开 发 人 员 又 适合 初学 者 的 
工具 。NetObjects TopPage 是 一 种 全 能 的 工具 ,小 型 企业 .个 人 和 学 校 均 可 用 它 很 方便 地 
建立 外 观 优美 的 网 站 。 此 外 ,TopPage 还 是 一 种 先进 的 开发 环境 ,在 此 环境 中 ,网 络 设 计 
管理 者 可 用 动态 HTML 进行 链接 或 制图 、 编 辑 级 联 式 表格 、 建 立 可 编辑 的 站 点 分 布 图 、 
修剪 或 滚动 图 像 .建立 JavaScript 应 用 程序 、 创 立 和 管理 框架 。 总 之 ,TopPage 可 以 创建 
在 所 有 浏览 器 上 都 能 运行 自如 的 网 页 ,使 用 起 来 极其 方便 。 

4. Eclipse 

Eclipse 是 一 个 开放 源 代码 的 、 基 于 Java 的 可 扩展 开发 平台 。 就 其 本 身 而 言 , 它 只 是 
一 个 框架 和 一 组 服务 ,可 以 通过 插件 组 件 构 建 开 发 环境 。Eclipse 附带 了 一 个 标准 的 插件 


集 , 包 括 Java 开发 工具 (Java Development Tools,JDT), 还 包括 插件 开发 环境 (Plug-in 
Development Environment:.PDE) ,这 个 组 件 主要 针对 希望 扩展 Eclipse 的 软件 开发 人 员 ， 
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因为 它 允 许 他 们 构建 与 Eclipse 环境 无 颖 集成 的 工具 。 

Eclipse 就 像 软 件 开 发 者 的 “打铁 铺 ”, 一 开始 只 有 火炉 、 铁 钻 与 铁 锤 。 但 铁匠 会 用 现 
有 的 工具 打造 出 新 的 工具 ,使 用 Eclipse 可 以 打造 出 进行 不 同 软件 开发 的 工具 。 例 如 , 通 
过 添加 Eclipse 匹配 的 汉化 包 插件 可 以 汉化 Eclipse。 通 过 添加 Visual Editor 插件 可 以 建 
立 编写 Java 类 可 视 化 的 开发 环境 。 通 过 添加 MyEclipse 与 设置 Tomcat 服务 器 ,可 以 建 
立 开发 J2EE 应 用 的 开发 环境 。 

Eclipse 是 一 个 开放 源 代码 的 项 目 , 任 何人 都 可 以 到 http://www. eclipse. org/ 
downloads 下 载 Eclipse 的 源 代 码 ,并且 在 此 基础 上 开发 自己 的 功能 插件 , 它 是 一 款 非常 
受 欢迎 的 软件 开发 工具 ,也 是 进行 Web 开发 常用 的 工具 ,实际 上 使 用 它 的 Java 开发 人 员 
是 最 多 的 。 

Eclipse 缺点 就 是 较 复杂 ,对 初学 者 来 说 ,理解 起 来 比较 困难 。 


1.10 思考 与 练习 


1.10.1 思考 题 


1-1 说 明 HTML 语言 对 网 络 的 促进 作用 。 

1-2 谈 谈 你 对 伯 纳 斯 李 的 看 法 。 

1-3 HTML 语言 和 浏览 器 是 什么 关系 ? 

1-4 本 书 中 所 指 的 静态 和 动态 是 什么 意思 ? 通常 所 说 的 动态 是 什么 意思 ? 
1-5 Web 客户 端 有 哪些 常用 技术 ? 

1-6 ”Web 服务 端 有 哪些 常用 技术 ? 

1-7 本 章 中 出 现 了 哪些 英文 缩写 名 称 ? 它们 各 代表 什么 含义 ? 


1.10.2 上 机 练习 
选择 一 种 开发 Web 页 的 工具 ,上 机 了 解 其 使 用 方法 。 


。 #80 


第 4 南 | 


超 文 本 标记 语言 一 一 HTML 


要 开发 网 站 , 先 要 掌握 编写 网 页 的 技术 ;要 编写 网 页 , 先 要 了 人 解 HTML 语言 , 即 超 文 
本 标记 语言 , 它 是 编写 网 页 的 基础 。 

HTML 语言 由 一 些 标记 码 、 字 母 和 文字 组 成 ,以 普通 的 文本 文件 格式 保存 ,可 以 用 所 
熟悉 的 任何 文字 编辑 器 来 编辑 。 通 过 HTML 中 简单 的 标记 码 , 在 浏览 器 中 可 以 显示 包 
含 文本 、 图 像 、 声 音 、 视 频 等 元 素 的 声 、 图 . 文 并 茂 的 页 面 , 通 过 超 链接 标记 码 可 以 实现 当前 

页 面 到 其 他 任何 Web 页 面 的 超 链接 。 

HTML 语言 初期 只 有 很 少 的 一 些 标 记 , 但 由 于 在 HTML 页 面 上 显示 的 内 容 越 来 越 
多 ,其 标记 在 不 断 增加 ,通过 HTML 的 最 新 版 本 可 以 了 解 最 新 最 全 的 标记 。 本 章 主要 介 
绍 一 些 HTML 的 基本 知识 。 

本 章 主要 解决 以 下 问题 : 

。 如 何 使 用 HTML 语言 编写 HTML 格式 文件 ; 

。 显示 一 个 HTML 页 面 使 用 哪些 标记 码 ; 

。 显示 不 同文 本 格式 使 用 哪些 标记 码 ; 

。 在 页 面 中 实现 超 链接 使 用 哪些 标记 码 ; 

。 在 页 面 中 添加 其 他 元 素 使 用 哪些 标记 码 ; 

。 显示 表单 组 件 使 用 哪些 标记 码 。 


2.1 HTML 页 面 结构 标记 码 


本 节 主 要 解决 如 何 使 用 HTML 标记 码 编写 .保存 HTML 文件 ,如 何在 浏览 器 中 浏 
览 HTML 文件 .用 哪些 标记 码 定义 HTML 页 面 结构 等 问题 。 


2.1.1 开始 与 结束 标记 码 
告诉 浏览 器 开始 显示 一 个 HTML 文档 的 标记 码 是 二 html> , 它 告诉 浏览 器 下 面 的 


内 容 是 HTML 文档 ,在 HTML 文档 结束 处 要 有 对 应 的 过 /html 之 标记 码 , 它 告诉 浏览 器 
HTML 文档 结束 了 。 


开始 与 结束 标记 码 的 语法 格式 : 
yz24 。 


<html> 


html 文件 的 所 有 内 容 
</html> 


2.1.2 头 部 标记 码 


HTML 文档 的 头 部 标记 码 是 二 head> , 它 告诉 浏览 器 下 面 的 内 容 是 HTML 文档 的 
头 部 ,显示 在 文本 之 前 ,一 /head> 标 记 码 告诉 浏览 器 头 部 内 容 结束 了 。 

头 部 标记 码 的 语法 格式 : 

<head> 


HTML 文档 的 头 部 内 容 
< /head> 


头 部 内 容 一 般 包括 注释 META 和 标题 。 
2.1.3 网 页 标题 标记 码 


<title 二 和 所 /title 之 标记 码 对 告诉 浏览 器 标记 码 对 之 间 所 包含 的 文字 为 这 个 Web 
页 的 标题 ,一 般 写 在 头 部 标记 码 之 中 。 网 页 标题 文字 会 显示 在 Web 浏览 器 最 上 面 的 title 
(标题 ) 栏 上 。 浏 览 器 用 户 可 以 把 标题 加 入 收藏 夹 中 ,所 以 网 页 标题 文字 最 好 使 用 中 文 并 
且 有 明确 的 意义 。 

网 页 标题 标记 码 的 语法 格式 : 

<title>Web 页 的 标题 < /title> 

下 面 用 一 个 例子 来 说 明 如 何 使 用 HTML 语言 编写 一 个 HTML 页 面 ,虽然 有 点 麻烦 
(使 用 网 页 编辑 器 可 以 自动 生成 一 个 HTML 页 ) ,但 能 帮助 你 弄 清 HTML 文档 的 结构 。 

例 2.1 写 一 个 具有 头 部 内 容 和 网 页 标题 的 HTML 文档 (2-1. html 文件 ) 。 

编写 HTML 文档 的 步骤 如 下 : 

(1) 打开 记事 本 ,输入 以 下 标记 码 和 文本 文字 


<html> 


<head> 

<title> 2-1 这 里 显示 的 文字 是 : Web 页 标题 < /title> 

这 里 显示 的 是 : Web 页 面 头 部 标记 码 中 的 文字 

< /head> 

< /html> 

(2) 将 输入 的 内 容 保存 为 名 称 为 2-1. html 的 文本 类 型 (. txt) 文 件 ,注意 其 保存 路 径 ， 
例如 E:HTML。 

(3) 在 I 正 浏览 器 菜单 栏 单 击 “ 文 件 ” 习 “打开 ”菜单 ,在 EE 盘 HTML 文件 夹 中 选 
择 2-1. html, 即 可 通过 IE 浏览 器 显示 你 编写 的 HTML 网 页 了 ,结果 如 图 2.1 所 示 。 


2.1.4 主体 标记 码 


去 body 盖 标记 码 是 HTML 文档 主体 标记 码 的 开始 ,结束 符 为 一 /body 之 。HTML 
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当 2-1 这 里 显示 的 文字 是 : Web 页 标题 -~ Hicrosoft --- 萎 | 癌 | 区 | 
文件 人 ) 编辑 于 ) 查看 WD 收藏 这) 工具 上) 帮助 0D 
四 鲁 - 轩 - 国 国 的 用 凡 丙 wmx 


地 址 @) | 入 |E:\HTNL\2-1. htnl 


这 里 显示 的 是 ， Web 页 面 头 部 标记 中 的 文字 


图 2.1 在 浏览 器 中 显示 的 HTML 页 面 


页 面 的 主要 内 容 都 出 现在 二 body 二 和 所 /body 二 标记 码 对 之 中 。HTML 文档 中 只 能 有 
一 对 body 标记 码 , 且 它 只 能 跟 在 head 标记 码 后 面 。 
主体 标记 码 的 语法 格式 : 


<body> 
主体 内 容 
< /body> 


例 2.2 一 个 使 用 主体 标记 码 在 HTML 文档 (2-2. html 文件 ) 。 


<html> 

<head> 

<title> 2- 2< /title> 

这 里 显示 的 是 : web 页 面 头 部 标记 码 中 的 文字 
< /head> 

<body> 

这 是 使 用 HTML 语言 编写 的 Web 页 面 文件 

< /body> 

< /html> 


2-2. html 在 I 正 浏 览 器 里 的 显示 结果 如 图 2.2 所 示 。 


EB 2-2 - Hicrosoft Internet Exzplorer 
文件 FF) 编辑 EE) 查看 @) 收藏 由 ) 工具 XY) 帮助 0D 


@se-©- 国 国人 @ Per Ww 


地 址 @) | 贸 ] FE: \HTNL\2-2. htnl 


这 里 显示 的 是 ，Web 页 面 头 部 标记 中 的 文字 这 是 使 用 HTIL 
语言 编写 的 Web 页 面 文件 


网 我 的 电脑 
图 2.2 添加 主体 内 容 的 页 面 


注意 : 从 以 上 四 对 标记 码 可 以 看 到 HTML 语言 的 标记 码 是 由 英文 字母 与 “一 ”、 
“ 盖 ”“</” 符 号 构成 的 ,开始 为 二 标记 码 盖 ,结束 为 二 /标记 码 盖 ,这 一 点 在 编写 HTML 
语言 时 一 定 要 牢记 。 

HTML 语言 的 标记 码 是 成 对 出 现 的 ,不 过 :也 有 个 别 的 标记 码 是 单独 出 现 的 ,以 后 会 
看 到 。 


jw26 。 


标记 码 使 用 的 英文 字母 一 般 为 小 写 , 其 实 大 小 写 都 可 以 .浏览 器 不 区 分 字母 的 大 
小 写 。 


2.1.5 通过 设置 主体 标记 码 的 属性 定义 页 面 背 景 


< 二 body 之 标记 码 还 具有 一 些 属 性 ,例如 ,背景 色 、 链 接 的 颜色 .文字 的 颜色 等 。 

带 有 属性 的 主体 标记 码 语 法 格式 : 

<body [bgcolor=# |text=# 11ink=# 1alink=# 1vlink=# |background= 图 像 文 件 名 ]> 

文档 内 容 

< /body> 

其 中 ,bgcolor 为 页 面 背景 颜色 属性 ,text 为 页 面 中 文字 的 颜色 属性 ,link 为 页 面 中 待 
连接 超 链 接 对 象 的 颜色 属性 ,alink 为 页 面 连 接 中 超 链接 对 象 的 颜色 属性 ,vlink 为 页 面 中 
已 连接 超 链接 对 象 的 颜色 属性 ,background 指定 HTML 背景 为 平 铺 的 图 像 。 

各 属性 的 参数 值 可 以 是 用 英文 red、blue、yellow 等 ,也 可 以 是 # 与 6 位 十 六 进 制 数 ， 
每 种 颜色 用 两 位 十 六 进 制 数 ,从 00 到 FF ,前 两 位 设置 红色 的 深浅 ,中 间 两 位 设置 绿色 的 
深浅 ,后 两 位 设置 蓝 色 的 深浅 。 例 如 红色 为 #ff0000, 蓝 色 为 #0000ff 等 。 各 属性 可 选 也 
可 不 选 。 

注意 : 方 括号 [] 中 的 属性 可 选 可 不 选 , 竖 线 (|) 表 示 可 同时 选 的 属性 。 根 据 需要 可 以 
选择 其 中 的 一 个 、 部 分 或 全 部 。 

例 2.3 添加 文字 颜色 和 背景 颜色 属性 的 文档 (2-3. html 文件 ) 。 


<html> 

<head> 

<title> 2- 3< /title> 

这 里 显示 的 是 : web 页 面 头 部 标记 码 中 的 文字 
< /head> 

<body bgcolor= "yellow" text= "#000000"> 
这 是 使 用 HIML 语言 编写 的 web 页 面 文件 

< /body> 

< /html> 


文件 2-3. html 在 Web 浏览 器 的 显示 结果 如 图 2. 3 所 示 。 不 过 ,颜色 从 本 书 上 是 看 
不 出 来 的 ,可 以 亲手 试 一 试 。 


E Ea - 了 Hicrosoft Internet Exzplorer 
文件 FE) 编辑 人 E) 查看) 收藏 由 ) 工具 XI) 帮助 0D 


@an- 日 -四 加 的 记 时 坎 emx 


地 址 @) | 和 |E:\HTNL\2-3. htnl 问 固 罗 


这 里 显示 的 是 ， Web 页 面 头 部 标记 中 的 文字 这 是 使 用 HTIL 
语言 编写 的 Web 页 面 文件 


图 2.3 添加 颜色 属性 的 页 面 


。 全 


注意 : 在 编写 HTML 文件 时 要 采取 “编写 一 存盘 一 浏览 ”三 步 曲 ,以 此 循环 工作 。 
2.1.6 说 明 信 息 标记 码 


在 网 页 的 头 部 还 可 以 看 到 meta 标记 码 , 它 用 来 描述 说 明 信 息 ,包括 文档 的 语言 字符 
集 信 息 、 作 者 信息 、 文 档 过 期 时 间 、 关 键 词 列 表 、 页 面 的 自动 刷新 属性 等 。meta 标记 码 的 
内 容 在 浏览 器 中 不 显示 。 

说 明 信 息 标记 码 的 语法 格式 : 


<meta http- equiv= "特征 名 " content= "特征 值 [; charset=# ]"> 
例如 : 


<meta http- equiv= "Content- Type" content= "text/html; charset= gb2312"> 
<meta http- equiv= "作者" content= "张驰 "> 
<meta http- equiv= "文档 期 限 " content= "2008/9/25"> 


<meta http- equiv= "refresh" content= "10"> 


refresh 用 来 设置 页 面 的 自动 刷新 属性 ,时 间 为 10 秒 。 
注意 : meta 一 般 放 在 头 部 内 。 人 常用 的 语言 字符 集 有 xmac-roman、gb2312 .gb_2312- 
80 big5 等 。 


2.1.7 注释 标记 码 “ 二 1” 与 “二 ” 

为 了 使 程序 清楚 .容易 理解 ,可 以 添加 注释 标记 码 "“ 二 !” 和 ”之 ”( 也 可 写 为 “所 !-- ”和 
“一 -二 ”) ,在 注释 标记 码 这 对 符号 之 间 的 内 容 不 会 被 浏览 器 显示 出 来 。 

二 !DOCTYPE… 二 用 来 在 HTML 文档 的 第 一 行 显示 版 本 信息 。 例 如 : 


< !DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.0 Transitional//EN"> 


2.2 定义 文本 格式 的 标记 码 


在 例 2.3 中 可 以 看 到 头 部 文字 和 主体 文字 是 连 在 一 起 的 ,而 且 字 体 大 小 一 样 ,不 能 分 
辨 哪里 是 头 部 文字 ,哪里 是 主体 中 的 文字 。HTML 语言 是 如 何 解决 这 个 问题 的 呢 ? 
本 节 的 内 容 主 要 解决 用 哪些 标记 码 在 HTML 文档 中 显示 不 同 格式 的 文本 文字 。 


2.2.1 文本 标题 标记 码 


HTML 通过 文本 标题 标记 码 来 显示 作为 标题 的 文本 文字 。 通 过 文本 标题 标记 码 告 
诉 浏览 器 将 这 些 文 本 文字 以 指定 标题 (黑体 字 ) 格 式 显示 在 指定 位 置 。 

文本 标题 标记 码 为 二 hi 之 生 /hi 盖 。 被 二 hl 之 和 到 /hl 之 夹 在 中 间 的 文本 文字 ,为 
1 号 标题 .依次 可 以 标注 出 6 个 层级 的 子 标题 ,从 过 hl 之 到 过 h6 二 。 差 别 在 于 标题 数字 小 
的 文本 会 比 标题 数字 大 的 文本 大 些 、 粗 些 、 更 显眼 。 在 下 面 的 例子 里 可 以 看 见 它们 之 间 的 
差别 。 每 遇 到 一 个 文本 标题 标记 码 时 ,当前 段落 就 会 被 终止 ,作为 标题 的 文本 前 后 会 各 留 
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出 一 定 的 空白 。 标 题字 自动 从 下 一 行 开 始 。 
文本 标题 标记 码 的 语法 格式 : 
<hi> 标 题 文字 < /hi> (i=1,2,*… ,6) 
例 2.4 使 用 不 同文 本 标题 标记 码 的 文档 (2-4. html 文件 ) 。 


<html> 

<body> 

<hl> 这 是 hl 标题 字体 !!< /hl> 
<h3> 这 是 h3 标题 字体 !!< /h3> 
<h5> 这 是 h5 标题 字体 !!< /h5> 
< /body> 

< /html > 


文件 2-4. html 在 浏览 器 里 显示 的 结果 如 图 2.4 所 示 。 


Eh - Hicrosoft Internet Exp--- 蕊 | 品 | 区 | 
文件 FE) ”编辑 人 E) 查看 了 收藏 由 ) 工具 YI) 和 天 助 0D 


@an-©- 国 四 Pur ums 


地 址 m) | 入] FE: HTWL\2-4. html 问 贺 关 


这 是 hl 标题 字体 ! ! 
这 是 h3 标 题字 体 !! 
这 是 h5 标 题字 体 !1! 


图 2.4 显示 不 同 标题 文字 的 页 面 


2.2.2 字体 标记 码 及 大 小 和 颜色 属性 


通过 一 font 二 一 /font 字体 标记 码 及 其 属性 能 够 改变 包含 的 字符 .单词 .短语 或 指定 
范围 文本 的 字体 大 小 和 颜色 。 

字体 标记 码 的 语法 格式 : 

< font size=# color=#> 文 字 < /font> 

Size 属性 用 来 设置 文本 字体 的 大 小 (属性 值 为 1 一 7 ,或 者 相近 的 数字 ) ,默认 为 3 号 
字体 。Color 属性 与 主体 中 的 color 属性 相同 。 

例 2.5 设置 文字 字体 大 小 和 颜色 的 文档 (2-5. html 文件 ) 。 


<html> 

<body> 

< font size=7 color=#ff0000> 这 是 7 号 字体 !1!1< /font> 
<font size=5 color=#0000ff> 这 是 5 号 字体 1!! < /font> 
<font size=3> 这 是 3 号 字体 !!< /font> 
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<font size=1> 这 是 1 号 字体 !!< /font> 
< /body> 
</html > 


文件 2-5. html 在 浏览 器 显示 的 结果 如 图 2. 5 所 示 。 


沁 E:\HTML\2-5- htal - Hicrosoft Internet Exp--- |- 
文件 人 ) ”编辑 下 ) 查看 @) 收藏 和 由) 工具 XI) 帮助 0D 


Oa-©- 国 国人 Pm wx 


地 址 甸 ) | 入] E:\HTNL\2-5. htnl 


这 是 7 写字 体 ! 


是 5 号 字体 ! ! 这 是 ?号 字体 | | 过 gs 字 作 ( 4 


图 2.5 显示 不 同 字 体 文字 的 页 面 


注意 : 字体 标记 码 不 会 自动 换行 ,这 一 点 与 标题 字体 不 同 。 字 体 标记 码 一 般 在 大 块 
的 正文 文字 中 使 用 。 

2.2.3 段落 标记 码 与 换行 标记 码 

在 HTML 文档 里 不 需要 在 意 文档 每 行 的 宽度 ,不 必 担 心 文字 是 不 是 太 长 了 而 被 截 
掉 , 它 会 根据 页 面 窗口 的 宽度 自动 换行 。 

过 P 二 是 HTML 格式 中 特有 的 段落 标记 码 。 二 P 二 标记 码 格 式 浏览 器 页 面 中 的 文本 
文字 在 这 里 分 为 一 段 ,下 面 的 文字 要 成 为 一 个 新 的 段落 从 头 再 开始 。 如 果 不 使 用 二 P> 
标记 码 ,浏览 器 会 把 所 有 的 文字 都 排 在 一 个 段落 里 , 遇 到 窗口 的 边界 自动 换行 。 文 本 文件 
中 的 换行 标记 浏览 器 是 不 认识 的 。 

去 br 二 是 HTML 格式 中 特有 的 换行 标记 码 。 近 br 二 标记 码 告 诉 浏 览 器 页 面 中 的 文 
本 文字 在 这 里 要 换行 ,下 面 的 文字 要 换行 从 头 再 开始 。 

段落 标记 码 与 换行 标记 码 的 语法 格式 : 

<P> 文 本 </P> 

文本 <br> 

下 面 的 例子 可 以 看 出 二 者 的 区 别 。 

例 2.6 使 用 段落 和 换行 标记 码 的 文档 (2-6. html 文件 )。 


<html> 
<body> 

在 HIML 文 档 里 不 需要 在 意 文档 每 行 的 宽度 ,不 必 担 心 文字 是 不 是 太 长 了 而 被 截 掉 , (加 段落 标 
记 码 另 起 一 段 )<P> 会 根据 页 面 窗口 的 宽度 自动 换行 。</P> 标 记 码 告诉 浏览 器 页 面 中 的 文本 文字 
在 这 里 要 换行 加 换行 标记 码 ),<br> 下 面 的 文字 要 换行 从 头 再 开始 。 
< /bodqy> 


m30 。 


</html> 


文件 2-6. html 在 浏览 器 显示 的 结果 如 图 2.6 所 示 。 


在 HTIL 文 档 里 不 需要 在 意 文 档 每 行 的 宽度 ， 不 必 担心 文字 是 不 是 
| 太 长 了 而 被 截 挤 ，〔 加 丘 落 标记 码 另 其 一 段 ) 


它 会 根据 页 面 窗口 的 宽度 自动 换行 。 

| 标记 码 告 诉 浏览 器 页 面 中 的 文本 文字 在 这 里 要 换行 (加 换行 标记 

下 面 的 文字 要 换行 从 头 再 开始 。 3 
一 计算 机 | 保护 模式 :禁用 臣 100% ~ | 


图 2.6 使 用 段落 与 换行 标记 码 的 页 面 
注意 : 一 br 之 标记 码 是 单独 使 用 的 。 
2.2.4 字符 格式 标记 码 


对 特殊 的 字 或 句子 可 以 使 用 字符 格式 标记 码 在 浏览 器 中 以 不 同 格式 显示 ,常用 的 文 
本 格式 标记 码 有 : 斜体 标记 码 志 全、 强调 标记 码 二 em 过、 黑体 标记 码 志 b 二 .着重 强调 标 
记 码 二 strong 二 ,下 划 线 标记 码 志 U> ,打字 机 字体 标记 码 二 tt 之 。 还 有 : 

。 <~big> 显示 大 型 文本 文字 ; 

。 一 code ”标记 HTML 指令 ; 

。 =~=dfn> 标记 定义 的 语句 ; 

。 二 kbd> ”标记 键盘 字符 ; 

。 <~pre> 按照 原来 键入 的 方式 原样 显示 文字 间隔 ,换行 、 空 白 等 ; 

.<Ss> 给 文本 加 上 删除 线 标记 ; 

。 二 samp ”标记 码 某 个 命令 的 例子 ; 

。 二 small> ”显示 小 号 尺寸 的 文本 ; 

。 =~=sub> 创建 下 标 ; 

。 一 sup 二 创建 上 标 ; 

。 <~var> 标记 程序 变量 。 

注意 : 这 些 标记 码 都 是 成 对 使 用 的 。 

例 2.7 使 用 格式 标记 码 显 示 文 本 的 文档 (2-7. html 文件 ) 。 


<html> 

<body> 

<i> 斜 体 </i><en> (斜体 )< /em> 

<b> 黑 体 </b><strong> (黑体 )</strong><br> 

<tt> 打 字 机 字体 < /tt><var> 程 序 变量 x y< sub> 2< /sub>  z<sup>3</sup></var><br> 
<code> HTML 指令 < /code> < samp> 例 1< /samp> 


.Fan 


<kbd> 使 用 键盘 字符 时 as#@ !()&* </kbdq> 
<big> 用 以 显示 大 型 文本 < /big> 
< pre> 
看 看 是 怎样 使 文本 保持 原 有 模样 的 ! 
#1!1/bin/csh cd$ SCRX * cfsgetmysrc.f:mycfsdir/mysrc.f 
fc- 02- omya.outmysrc.f mya.out 
< /pre> 
< /body> 
</html> 


文件 2-7. html 在 浏览 器 显示 的 结果 如 图 2.7 所 示 。 


合共 (合共 ) 黑体 (黑体 ) 
打字 机 字体 碑 庐 你 熏 r ya 7 


HTICL 指 令 例 ! 使 用 键盘 字符 时 a%#@!10&* 用 以 显示 大 型 文本 


看 看 是 怎样 使 文本 保持 原 有 模样 的 ! 
#l/bim/csh cd$SCRX* cfsgetmysrc.f:mycfsdir/mysrc.f 
fc-02-omya. outmysrc.f mya. out 


完成 于 计算 机 | 保护 模式 : 禁用 


图 2.7 显示 不 同 格式 的 字符 页 面 


2.2.5 分 区 标记 码 
分 区 标记 码 的 语法 格式 : 


<div> 一 个 分 区 的 内 容 < /div> 


利用 分 区 标记 码 志 div 之 过 /div 过 可 以 将 一 个 页 面 分 成 独立 的 几 个 部 分 ,使 分 区 中 包 
含 的 文字 具有 自己 的 样式 风格 ,而 独立 于 文档 的 其 他 文字 内 容 。 利 用 其 class 属性 可 以 为 
分 区 起 一 个 名 字 。 分 区 的 属性 还 有 align。 例 如 : 


<div class=Cl align= center> …< /div> 


该 分 区 的 内 容 都 将 居中 显示 。 
2.2.6 块 引 用 标记 码 
块 引用 标记 码 的 语法 格式 : 


<blockquote> 引 用 文字 < /blockquote> 


所 blockquote 之 与 二 /blockquote 过 标记 码 之 间 一 般 包 含 较 长 的 大 块 文本 ,浏览 器 在 
显示 块 中 文本 时 会 自动 右 移 ,左边 空 出 几 个 格 ,将 包含 块 中 的 文字 与 其 他 文字 区 别 开 。 


ma2 。 


2.2.7 地 址 标记 码 

二 address 二 标记 码 通 常用 来 告知 本 篇 文件 作者 的 联系 地 址 、 电 话 、E-mail 信箱 。 经 
常 有 一 个 E-mail 地 址 放 在 文件 的 最 后 面 。 

地 址 标记 码 的 语法 格式 : 

<address> 地 址 .电话 .Email 信箱 < /address> 

一 address 二 … 一 /address 二 标记 码 对 定义 文字 为 斜体 。 
2.2.8 几 个 特殊 字符 的 写法 


在 ASCII 码 中 ,有 三 个 字符 :“> 盖 ”( 大 于 )“< ”( 小 于 )“ 耻 ”( 和 ) 被 当 作 HTML 文 
档 中 的 控制 码 , 要 在 屏幕 上 显示 “二 ”字符 需 在 HTML 文档 中 输入 "&lt”, 显示“ 二 ”字符 
需要 输入 “&.gt”, 显 示 “&” 字 符 需 要 输入 “&amp”。 

还 有 两 个 常用 符号 分 别 代 表 著 作 权 标志 和 商标 符 , 可 以 在 HTML 文档 中 输入 
“& copy” 与 “& reg”, 在 浏览 器 中 将 显示 加 与 @@。 


2.3 实现 超 链 接 的 标记 码 


超 链 接 标记 码 是 HTML 语言 的 重要 标记 , 它 使 得 网 页 具有 了 “超人 ”的 功能 , 它 可 以 
在 一 个 网 页 的 不 同 段 落 间 任 意 地 链接 ,也 可 以 从 当前 页 面 链接 到 另外 一 台 Web 服务 器 上 
的 Web 页 面 , 还 可 以 直接 链接 到 本 机 的 另 一 Web 页 面 。 

本 节 的 内 容 主要 解决 用 哪些 标记 码 在 HTML 文档 的 不 同 页 面 之 间 、 不 同 段落 之 间 
实现 超 链接 功能 ,如 何在 HTML 文档 添加 声音 、 视 频 信 息 等 元 素 。 
2.3.1 链接 至 本 机 另 一 Web 页 面 


超 链接 标记 码 为 二 a 二 二 /a 二 ,链接 到 本 机 上 的 Web 页 面 很 简单 ,只 要 给 二 a 二 标记 
码 的 href 属性 设置 文件 名 和 路 径 就 可 以 了 。 
超 链 接 标记 码 的 语法 格式 : 


<a href= "filename.html"> 链 接 到 filename< /a> 


在 浏览 器 中 会 看 到 超 链接 标记 码 标记 的 “链接 到 filename” 超 链接 文字 ,其 会 变色 并 
加 上 下 划 线 , 当 鼠 标 移 到 上 面 时 ,鼠标 箭头 会 变 成 小 手 状 , 单 击 超 链接 文字 ,浏览 器 会 链接 
到 同一 机 器 同一 路 径 的 filename. html 文件 上 。 例 如 : 


<a href="2- 7.html"> 这 里 是 "2-7.html"Web 页 </a> 
在 浏览 器 中 单 击 “这 里 是 "2-7. html" Web 页 ”将 显示 2-7. html 文件 。 
2.3.2 链接 到 其 他 服务 器 的 Web 页 
链接 到 其 他 服务 器 上 的 Web 页 操作 也 很 简单 ,只 要 把 目的 地 的 URL 地 址 作为 href 
。 FeqM 


的 属性 值 就 可 以 了 。 例 如 , 想 链接 到 “首都 在 线 ” 的 主页 .可 以 编写 如 下 语句 : 
<a href="http://www.263.net"> 这 里 是 首都 在 线 的 主页 < /a> 
超 链 接 标记 人 码 的 语法 格式 : 
<a href="URL"> 这 里 是 某 地 方 < /a> 
例 2.8 使 用 超 链 接 标记 码 从 当前 页 面 链 接 到 其 他 Web 页 的 文档 (2-8. html 文件 ) 。 


<html> 
<body> 例如 : 单 击 这 里 可 以 链接 到 本 机 的 
<a href="2-7.html">"2-7.html"Web 页 < /a> 
<p> 链 接 到 其 他 服务 器 上 的 web 页 操作 也 很 简单 ,只 要 把 目的 地 的 URL 地 址 作为 nref 的 属性 值 就 
可 以 了 。</p> 
例如 , 想 连接 到 "首都 在 线 " 的 主页 ,可 以 单 击 这 里 : 
<A href= "http://www.263.net"> www.263.net< /R> 即 可 。 
< /bodqy> 
< /html> 


文件 2-8. html 的 显示 结果 如 图 2. 8 所 示 。 


| 容 - 安 -|89[-|@@ca | 和 @c- x| 全 7 国生 加 
例如 ， 单 击 这 里 可 以 链接 到 本 机 的 “2-7.html“Web 页 


链接 到 其 他 服务 器 上 的 Web 页 操作 也 很 向 单 ， 只 要 把 目的 地 的 URL 地 
址 作为 href 的 属性 值 就 可 以 了 


例如 ， 想 连接 到 “首都 在 线 ” 的 主页 ， 可 以 单 击 这 里 ， 
www. 263. net 即 可 。 


汪 计算 机 | 保护 模式 : 禁用 人 100% ~ 


图 2.8 显示 超 链 接 的 页 面 


注意 : 当 链 接 到 另 一 个 HTML 文件 时 ,要 做 一 个 返回 到 本 页 的 链接 才 可 回 到 原来 的 
页 面 ,否则 就 不 容易 返回 了 。 


2.3.3 链接 到 同一 文件 的 另 一 个 段落 


通过 超 链接 标记 码 不 仅 可 以 链接 到 其 他 html 文件 ,也 可 以 在 同一 个 Web 内 进行 链 
接 。 这 和 前 面 两 种 链接 稍 有 不 同 ,需要 在 链接 的 位 置 先 做 出 一 个 * 锚 ?标记 , 即 链接 的 目标 
地 ,再 做 到 “ 锁 ” 的 链接 。 例 如 , 先 在 文件 中 选择 “第 一 章 ” 做 “ 锚 ” 标 记 码 ,二 a name 一 "第 一 
章 "二 第 一 章 二 /a 二 ; 青 做 到 “ 锚 ” 的 链接 ,一 a href 二 "# 第 一 章 "二 单 击 这 里 将 显示 第 一 章 
< a 

例 2.9 连接 到 同一 Web 页 其 他 段落 的 文档 (2-9. html 文件 ) 。 


<html> 


Wm34. * 


<body> 

<A name=" 第 一 章 "> 第 一 章 </A> 为 " 锚 " 标 记 码 。 

<p> 除 了 链接 到 另 一 个 BTML 文件, 也 可 以 在 一 篇 文章 内 随心 所 欲 地 链接 。<br> 
这 和 前 面 两 种 稍 有 不 同 , 需 要 先 做 出 一 个 * 锚 ”标记 码 , 即 链接 的 目标 地 ,<br> 
再 做 到 “ 锚 ” 的 链接 。 到 “ 锚 ” 的 链接 与 平常 相同 。< /p> 
<p></p><p></p><p></p><hr> 

<A href= 嘎 第 一 章 "> 单 击 这 里 将 显示 第 一 章 < /a> 

< /body> 

</html> 


文件 2-9. html 的 显示 结果 如 图 2.9 所 示 。 


0 且 
即 


链接 的 目标 地 
再 做 到 * 锚 "的 链接 。 到 “ 锚 "的 链接 与 平常 相同 。 


单 击 这 里 将 显示 第 一 


一 计算 机 | 保护 模式 : 禁用 
图 2.9 在 同一 文件 中 定义 的 超 链接 
注意 : 必须 在 不 同 的 屏幕 上 才能 看 到 链接 效果 ,在 同一 屏幕 看 不 出 链接 变化 。 如 
图 2.9 所 示 先 移动 到 页 面 下 方 ,再 单 击 链接 , 即 可 看 到 链接 到 的 文字 “第 一 章 ”。 
2.3.4 链接 到 不 同文 件 的 另 一 个 段落 


如 果 链 接 到 不 同文 件 的 某 个 段落 ,也 需要 先 设 置 “ 锚 ”标记 。 在 href 属性 值 中 文件 名 
后 再 添加 上 锚 标 记 即 可 .例如 : 

<A href="2- 9.html# 第 一 章 "> 到 第 一 章 < /a> 

在 其 他 网 页 单 击 “ 到 第 一 章 ” 超 链接 文字 就 会 显示 2-9. html 页 面包 含 “ 第 一 章 " 段 落 
的 页 面 。 

注意 : 除了 用 文字 作为 链接 标记 以 外 ,还 可 以 用 图 像 。 


2.3.5 链接 音频 和 视频 文件 
在 Web 页 面 中 加 入 音频 和 视频 文件 会 使 页 面 变 得 更 加 生动 .活泼 。 在 页 面 中 加 入 音 


频 和 视频 文件 的 方法 非常 简单 ,只 要 在 超 链 接 标 记 码 的 href 属性 中 指定 的 URL 网 址 、 加 
上 相应 的 音频 和 视频 文件 名 称 就 可 以 了 。 例 如 : 


<a href= "yy-mid"> 在 这 里 欣赏 音乐 < /a> 
<a href="test.mpeg"> 在 这 里 欣赏 视频 < /a> 


无 论 音频 信息 还 是 视频 信息 都 要 求 客户 端 有 相应 的 应 用 程序 可 以 播放 这 些 信息 。 这 
3 


些 程序 或 嵌入 浏览 器 或 独立 存在 。 现 在 有 的 浏览 器 可 以 直接 实现 音频 和 视频 信息 的 播放 
而 不 需要 更 多 的 附加 软件 。 

注意 : 音频 和 视频 的 数据 量 较 大 ,不 可 乱用 。 
2.3.6 链接 到 邮件 编辑 器 


通过 超 链接 的 href 属性 ,通过 mailto 值 可 以 直接 打开 一 个 具有 收 件 人 地 址 的 邮件 编 
辑 器 ,例如 


<A href=" mailto:ZHC@ 163.NET"> ZHC@ 163.NET< /A> 


2.4 显示 其 他 元 素 的 标记 码 


如 果 Web 页 面 上 全 是 文字 ,给 人 的 感觉 会 很 单调 ,怎样 才能 使 页 面 活泼 一 些 呢 ? 怎 
样 使 页 面 显示 出 文本 文字 以 外 的 其 他 信息 元 素 呢 ? 

本 节 的 内 容 主要 解决 用 哪些 标记 码 在 HTML 文档 显示 图 像 、 对 象 、 表 格 等 其 他 
元 素 。 


2.4.1 图 像 标记 码 


在 页 面 上 插入 图 像 可 使 用 img 标记 码 。 
图 像 标 记 码 的 语法 格式 : 


<img src= 图 像 的 URL [align=# alt= 文 字 border=# height=# width=#] > 


img 标记 码 告 诉 浏 览 器 这 里 要 显示 一 个 图 像 ,src 属性 告诉 浏览 器 图 像 文件 的 来 源 即 
URL 网 址 。 

img 的 属性 有 : align( 显 示 的 位 置 ) .alt( 显 示 文 字 ) 和 border( 边 框 ) height( 高 度 )、 
width( 宽 度 ) 。 

当 浏 览 器 关闭 显示 图 像 的 功能 时 ,通过 alt 属性 显示 Text( 文 字 ) 代 替 屏 幕 上 一 片 空 
白 或 碎 图 片 。Align 可 设置 图 像 显 示 的 位 置 为 top( 顶 )、Middle( 中 间 )、bottom( 底 )、Left 
( 左 ) 和 Right( 右 )。 默 认 图 像 位 置 为 文字 的 右边 。 如 果 图 像 很 大 ,几乎 充满 整个 窗口 ,可 
适当 缩小 。Border 属性 可 给 图 像 加 一 个 边框 ,其 值 取 像素 值 , 值 为 0 时 无 边框 。height 
(高 度 ) 和 width( 宽 度 ) 属 性 用 来 确定 在 浏览 器 中 显示 的 图 像 的 看 到 与 高 度 , 值 为 像素 值 。 

例 2.10 在 页 面 中 显示 图 像 并 链接 一 个 音频 文件 的 文档 (2-10. html 文件 ) 。 


<html> 

<body> 插 入 一 个 图 像 

< img src= 动 物 -gif alt= 动 物 > 

<p><p><Pp> 

加 框 并 变 小 的 图 像 

<img src= 花 .gif align= left border=2 height=100 width=200 alt= 鲜 花 > 
<br><P><P><a href="Water.gif"> 单 击 这 里 可 以 看 到 一 个 图 像 </a><P> 


m36 。 


<P><P><P><A hre 全 "Sound.wav"> 单 击 这 里 可 以 欣赏 音乐 < /a> < /body> 
</html> 


2-10. html 的 显示 结果 如 图 2. 10 所 示 。 
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加 框 并 变 小 的 图 像 
| 单 击 这 里 可 以 看 到 一 个 图 像 
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图 2.10 显示 图 片 并 链接 声音 文件 的 页 面 


注意 : 图 像 标记 码 一 img 二 没有 结束 标记 码 。 图 像 还 可 以 作为 链接 的 对 象 。 不 过 ,要 
用 小 图 片 ,否则 太 浪 费 空间 。 当 图 片 很 大 ,或 是 希望 读者 选择 性 地 看 大 图 时 ,可 以 做 一 个 
链接 ,用 几 个 文字 或 一 个 小 图 作为 超 链接 , 单 击 时 打开 大 图 窗口 ( 另 一 个 文件 ) ,图 2. 10 中 
就 有 这 种 情况 。 


2.4.2 对 象 标记 码 


在 Web 页 还 可 以 使 用 标记 码 OBJECT 插入 一 些 已 经 定义 好 的 对 象 。 
对 象 标记 码 的 语法 格式 : 


< object> …< /object> 
例 2.11 显示 一 个 插入 的 日 历 控件 对 象 的 文档 (2-11. html 文件 ) 。 


<html> 

<body><center><h3> 择 入 一 个 对 象 </h3>< /center> 

<object id= "日 历 控件 10.0" width= "300" height= "200" classid= "CLSID:8E27C92B- 
1264- 101C- 8A2F— 040224009C02"> 

</object> 

< /body> 

</htm> 


2-11. html 文件 显示 结果 如 图 2. 11 所 示 。 
使 用 二 applet 盖 … 近 /applet 一 标记 码 可 以 插入 一 个 使 用 Java 语言 编写 的 applet 应 
用 程序 。 
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图 2.11 在 页 面 中 显示 的 日 历 对 象 


2.4.3 表格 标记 码 


加 入 表格 可 使 页 面 整齐 直观 ,但 写 起 来 非常 烦琐 ,这 里 只 介绍 它 的 部 分 语法 格式 ,最 
好 使 用 编辑 器 来 编写 表格 标记 码 。 
表格 标记 码 的 语法 格式 分 为 如 下 5 部 分 。 


1. 表格 标记 码 

<table> …< /table> 

二 table 一 表示 下 面 是 一 个 表格 的 内 容 的 开始 ,二 /table 二 表示 表格 结束 。 
2. 表格 标题 标记 码 


<caption align=#> 表 格 标题 < /caption> 


表示 一 个 表格 的 标题 ,也 可 不 要 。align 可 选择 top( 放 在 表格 上 面 居中 )、bottom( 放 
在 表格 下 面 居中 ) ,默认 时 标题 放 在 表格 上 面 居中 。 


3. 表格 行 标记 码 

受 和 EE [Er> 

表示 表格 一 行 的 开始 和 结束 。 

4. 列 名 标记 码 

<th> 列 名 < /th> 

在 二 th 放 二 /了 h 二 中 间 加 入 列 ( 字 段 ) 名 ,有 几 个 列 名 就 加 入 几 个 二 th 二 二 /th 二 标记 人 码 。 


Jas » 


5. 列 数据 标记 码 


<td> 数 据 < /td> 


在 过 td> 过 /td> 中 间 加 入 该 列 数据 ,一 般 有 要 加 入 ( 行 X 列 ) 个 列 标记 码 二 td 二 


=/td>。 
表格 标记 码 具有 如 下 属性 : 
。 border 王 表示 表 的 边框 , 取 像 素 值 ,默认 时 表格 没有 边框 ; 
。 cellspacing 一 井 表示 格 边 宽 , 取 像素 值 , 默 认 值 为 2; 
。 cellpadding 王 # 表示 边框 和 内 容 间 的 距离 , 取 像 素 值 ,默认 值 为 1; 
。 colspan 一 井 表 示 占 用 列 数 ,默认 值 为 1; 
。 rowspan 一 井 表 示 占 用 行 数 , 默 认 值 为 1; 
。 width 一 %% 表 示 表 格 宽度 。 


例 2.12 显示 两 个 表格 (一 个 不 带 框 与 一 个 带 框 ) 的 文档 (2-12. html 文件 ) 。 


<html> 

<body> < table> 

<caption> 价 格 表 < /caption> 

<tr><th> 日 期 < /th><th> 香 菇 < /th><th> 青 椒 < /th> < /th> 
<tr><td>9.2</td><td>28.00 元 </td><tqd>0.90 元 </td></th> 
<tr><td>9.3</td><td>25.00 元 </td><tqd>0.93 元 </td></tr> 
</table><hr> 

< table BORDER= 4> 

<caption> 价 格 表 < /caption> 

<TR><TH> 日 期 < /TH><TH> 香 菇 < /th><th> 青 椒 < /th> < /tr> 
<tr><td> 9.2< /td><td> 28.00 元 </td><td> 0.90 元 < /td> < /tr> 
<tr><td></td><td>25.00 元 </td><td> 0.93 元 < /td> < /tr> 

< /table> 

< /body> 

< /html> 


2-12. html 显示 结果 如 图 2. 12 所 示 。 


注意 : 如 果 想 加 入 一 个 空白 格 ,在 二 TH 二 一 /TH 或 二 TD 二 一 /TD 二 之 间 不 加 内 
容 即 可 。 表 格 的 属性 有 很 多 ,可 以 变 宽 度 , 可 以 建立 链接 ,可 以 改变 颜色 等 ,你 可 以 自己 试 
一 试 。 如 果 要 使 用 表格 ,最 好 用 编辑 器 的 工具 直接 插入 。 在 网 页 中 使 用 太 大 的 表格 ,会 降 


低 浏 览 速度 。 
2.4.4 ”地 图 标记 码 


使 用 地 图 标记 码 可 以 让 浏览 页 面 的 用 户 通 过 地 图 链接 到 指定 的 地 点 ,用 户 在 地 图 图 


像 的 任意 一 处 单 击 时 ,浏览 器 将 会 输出 与 这 个 图 像 热 区 超 链接 的 Web 页 。 
地 图 标记 码 的 语法 格式 : 
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香菇 
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9.3 25.00 元 0.93 元 
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图 2.12 显示 表格 的 页 面 


< img src= img.gif usemap= "map- name"> 


<map name= "map- name "> 


<area shape="#" coords="#" href= "url"> 


< /map> 


通过 所 img 二 标记 码 的 属性 usemap 定义 作为 地 图 文件 的 名 字 与 显示 的 地 方 ， 
usemap 一 " 井 "表示 图 像 文件 包含 在 HTML 文档 内 ,不 带 # 表 示 图 像 为 一 个 独立 文件 。 


二 img 过 标记 码 的 属性 src 指定 作为 地 图 的 图 像 来 源 。 


一 map 二 标记 码 定 义 一 个 地 图 文件 ,必须 带 有 name 属性 ,name 属性 的 值 是 一 个 地 图 


文件 的 唯一 名 称 。 


二 area 二 标记 码 描述 图 像 中 一 个 热 区 的 位 置 ,可 有 任意 个 二 area 二 标记 码 项 。 
属性 shape 一 "rect" ,表示 热 区 形状 为 矩形 ;属性 coords 一 "A.A',B,B'" 表 示 和 矩形 坐 


标 ,(A,A') 为 左上 角 坐 标 ,(B,B') 为 右 下 角 坐 标 ; 


shape 一 "circle" ,表示 热 区 形状 为 圆 形 ,coords 一 "A,A',.R' "表示 圆 坐标 ,(A,A') 为 
圆心 坐标 ,R 表示 圆 半 径 ; 
shape 一 "poly" ,表示 热 区 形状 为 多 边 形 ,coords 二 "A.A'.B,B',C,C'…" 表 示 多 边 形 


坐标 ,(A,A') 为 第 一 个 角 坐 标 ,(B.B') 为 第 二 个 角 和 坐标,……… 第 n 个 角 坐 标 ; 
shape 二 "default" 表 示 所 有 非 热 区 的 区 域 。 
例 2.13 一 个 带 有 地 图 标记 码 的 文档 (2-13. html 文件 ) 。 


<html> 


<body> < img src= " 山 .GIF" usemap= "# Face"> 


<map name= "Face"> 


<area shape= "rect" href="2- 7.html" coords= "10,16,127,116"> 


< area shape= "rect" href="2- 8.html™" coords= "213,16,383,132"> 


<area shape= "poly" href= "2- 9.html "coords= "10,163,84,163,190,304,2,306"> 
<area shape= "circle" href="2- 10.html™" coords= "186,151,110"> 


| 。 


< /map> 
< /body> 
< /html> 


在 图 2. 13 所 示 图 像 中 用 鼠标 到 处 操作 一 下 ,就 会 理解 “地 图 ”的 意思 了 。 
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图 2.13 显示 地 图 的 页 面 


2.5 表单 及 组 件 标记 码 


如 何 通过 页 面 与 用 户 进行 交互 呢 ? 这 需要 提供 一 个 让 用 户 输 入 问题 的 接口 ,以 及 显 
示 服 务 器 对 问题 给 出 的 答案 的 接口 。form 表单 标记 码 就 是 解决 用 户 输入 问题 接口 的 具 
体 方案 。 

form 表单 标记 码 可 以 为 用 户 提 供 一 种 交互 界面 ,让 用 户 通过 表单 组 件 在 页 面 中 输入 
信息 ,与 其 他 程序 (JSP 或 ASP 程序 ,JavaScript) 一 起 与 用 户 进行 信息 交流 。form 有 两 个 
属性 ,一 是 指出 其 他 程序 的 路 径 和 名 称 , 二 是 确定 提交 用 户 输入 的 信息 给 服务 器 的 方式 。 
orm 标记 码 告诉 浏览 器 下 面 要 在 页 面 中 显示 表单 组 件 。 

表单 标记 码 及 组 件 标记 码 的 语法 格式 : 


< form method="" action=""> 


< input type="" name="" value="" size=""> 


< /form> 


method 属性 说 明 提 交 给 服务 器 信息 时 所 使 用 的 方式 ,一般 选择 post 或 get。 
action 属性 说 明 form 提交 的 信息 交 给 服务 器 中 的 哪个 应 用 程序 进行 处 理 , 其 路 径 与 


ee dd 


文件 名 。 由 于 本 章 不 讨论 与 其 他 程序 的 关系 ,所 以 下 面 的 form 没有 使 用 这 两 个 属性 。 在 
介绍 JSP 时 再 使 用 。 

与 form 表单 标记 码 配套 使 用 的 是 表单 组 件 标记 码 input, 它 用 来 描述 具体 的 表单 
组 件 。 

Input 标记 码 通过 type 属性 定义 表单 组 件 类 型 ,可 以 定义 text\password checkbox 、 
radio submit ,reset 等 不 同 组 件 。Name 属性 定义 组 件 的 名 称 。Value 属性 定义 组 件 的 默 
认 值 。Size 属性 定义 组 件 大 小 。 

本 节 的 内 容 主要 解决 如 何 HTML 文档 中 添加 表单 及 组 件 元 素 , 创 建 与 用 户 进行 交 
互 的 页 面 。 


2.5.1 文本 框 组 件 


如 何 让 用 户 在 页 面 上 输入 信息 呢 ? 输入 简单 的 信息 可 以 使 用 文本 框 组 件 。 
例 2.14 在 页 面 上 添加 带 有 初始 值 的 文本 框 组 件 的 文档 (2-14. html 文件 ) 。 


<html> 

<body> 

< form> 

输入 姓名 : < input type= "text" name= x2 value= "lp" size=14><br> 

输入 口令 :< input type= "password" name=x3 size=14 maxlengh= 18><br> 
电话 号 码 : < input type= "text" name= xl value= "010 51688529" > 

< /form> 

< /body> 

< /html> 


2-14. html 显示 结果 如 图 2. 14 所 示 。 


电话 号 码 ，010 088529 


类 计算 机 | 保护 模式 : 禁用 


图 2.14 添加 文本 框 的 页 面 


可 见 文本 框 组 件 可 以 让 用 户 输入 简短 文字 。 添 加 文本 框 组 件 的 方式 很 简单 ,只 是 
二 form 记 标记 码 对 之 间 input 标记 码 中 定义 type 属性 的 值 为 text 即 可 。 

通过 属性 size 可 指定 文本 框 的 大 小 ,其 值 以 字符 位 为 单位 。 如 果 不 指定 size 属性 , 浏 
览 器 以 默认 值 20 设置 size 的 大 小 。 属 性 maxlengh 定义 最 多 输入 的 字符 。 属 性 name 是 
用 来 保存 通过 文本 框 输入 的 数据 的 变量 。 


Mm? 。 


属性 value 用 来 定义 文本 框 的 初始 值 ,例如 "lp", 需 用 双 引 号 "" 
属性 type 为 password 表示 定义 的 是 密码 框 .用 户 输入 的 信息 将 以 字符 * 代替, 以免 
被 别人 看 见 


2.5.2 文本 区 组 件 


如 果 和 希望 用 户 多 输入 一 些 内 容 , 可 使 用 文本 区 组 件 。 只 要 在 过 form 盖 标记 码 后 , 皇 
入 标记 码 : 二 textarea cols 二 x rows 一 y 二 。 而 后 ,加 上 二 /textarea 二 和 二 /form 盖 标记 码 
即 可 ,通过 textarea 的 cols 属性 可 以 确定 文本 框 的 宽度 ,定义 文本 区 有 多 少 列 。 通 过 
rows 属性 可 以 确定 文本 区 的 高 度 , 即 有 多 少 行 

例 2. 1S 在 页 面 上 添加 一 个 多 行 多 列 文本 区 的 文档 (2.15. html 文件 ) 。 


<html> 

<body> 

< form> 

一 个 多 行 多 列 的 文本 框 <P> 
<textarea cols=30 name=x]1 rows= 8> 
</textarea> 

< /form> 

< /body> 

< /html> 


2-15. html 显示 结果 如 图 2. 15 所 示 。 


一 个 多 行 多 列 的 文本 框 


陆 计算 机 | 保护 模式 : 禁用 轩 100% ~ | 


图 2.15 添加 文本 区 的 页 面 


以 上 的 文本 框 与 文本 区 都 不 能 进行 交互 工作 。 如 果 要 使 它 能 进行 交互 工作 ,需要 使 
用 JavaScript 文件 或 JSP 文件。 


2.5.3 提交 与 重 置 命令 按钮 组 件 


提交 (submit) 命 令 按钮 的 功能 是 把 用 户 输入 的 信息 提交 给 相关 程序 ,让 服务 器 或 程 
序 进 行 处 理 。 重 置 Creset) 命 令 按 钮 的 功能 是 把 用 户 输入 的 内 容 从 文本 框 或 文本 区 清除 
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掉 , 以 便 重新 输入 。 

在 页 面 上 添加 这 两 个 命令 按钮 与 添加 文本 框 组 件 类 似 : 在 表单 组 件 标记 码 下 面 再 加 
入 二 input type 一 "submit" 之 和 二 input type 一 "reset" 二 即 可 。 通 过 input 标记 码 的 value 
属性 可 以 定义 命令 按钮 上 显示 的 文本 ,默认 文本 为 submit 和 reset。 一 般 情况 下 ,form 标 
记 码 对 都 要 具有 文本 框 , 文 本 区 等 输入 信息 的 组 件 与 提交 及 重 置 命令 按钮 组 件 , 这 样 表单 


才能 具备 完整 的 处 理 功能 。 
| 页 面 添 & 令 a 

例 2.16 在 页 面 添加 提交 及 重 置 命令 按钮 表 i 

单 组 件 的 文档 (2-16. html 文件 )。 Sg capsHao\pshat 7 | x]| God 
SE ND 纺 张 6 下 看 WA， 工 只 ”| 
<body> - 窗 - 罕 -| 乱 catpsHaoypshao 书 -| 一 | 从 - 
二 一 个 多 行 多 列 的 文本 杠 i 
一 个 多 行 多 列 的 文本 框 <P> 
< textarea cols= 30 Name=Xl rows= 8> 让 
< /textarea> 
<input type= "submit" value= "提交 "> 
< input type= "reset" value=" 重 置 "> - 
< /form> ER [重要 - 
< /body> 卫 计算 机 | 保护 模式 : 禁用 里 100% ~ ,| 


</html> 
图 2.16 添加 命令 按钮 的 页 面 
2-16. html 显示 结果 如 图 2. 16 所 示 。 


2.5.4 单 选 框 与 复 选 框 组 件 


单 选 框 (radio) 让 用 户 通 过 选择 输入 信息 ,更 方便 用 户 输入 。 通 过 单 选 框 一 次 只 能 从 
多 个 选项 中 选择 一 项 。 在 页 面 上 添加 单 选 框 , 只 需 在 二 form 二 标记 码 后 加 上 到 input 
type 一 "radio" 过 ,并 定义 其 name、value 属性 ,再 以 二 /form 二 结束 即 可 。 

创建 复 选 框 (checkbox) 是 为 了 方便 用 户 选 择 多 个 选项 内 容 。 添 加 一 个 多 选 框 只 要 在 
二 form 请 标记 码 后 加 上 三 input type 一 "checkbox" 二 ,并 定义 其 name、value 属性 ,再 以 
二 /form 访 标记 码 结尾 即 可 。 

例 2.17 在 页 面 添 加 单 选 框 和 多 选 框 组 件 的 文档 (2-17. html 文件 ) 。 


<html> 

<body> 

< form> 

<h3> 单 选 框 

< input type= "radio" name= "xl" value= "音乐 "checked> 音 乐 
< input type= "radio" name= "xl" value= "电影 "> 电影 

< input type= "radio" name= "xl" value= "小 说 "> 小 说 

< input type= "radio" name= "xl" value= "电视 "电视 </h3> 
< input type= "submit" value= "提交 "> 

< input type= "reset" value= " 重 置 "> 

<h3> 多 选 框 < /h3> < input type= "checkbox" name= "xl"> 北 京 


Ja4 . 


< input type= "checkbox" name= "x2"> 上海 

< input type= "checkbox" name= "x3"> 天 津 

< input type= "checkbox" name= "x4"> 重 庆 

< input type= "checkbox" name= "x5" checked> 武 汉 ( 已 被 选择 )<P> 
< input type= "submit" value= "提交 "> 

< input type= "reset" value= " 重 置 "> 

< /form> 

< /body> 

</htm> 


2-17. html 结果 显示 如 图 2. 17 所 示 。 


重庆 贺 武 汉 (已 被 选择 ) 


于 计算 机 | 保护 模式 : 禁用 
图 2.17 添加 单 选 框 与 复 选 框 的 页 面 


注意 : 单 选 框 name 只 能 选取 一 个 名 称 , 所 以 属性 值 都 是 x1, 只 能 保存 一 个 选项 结 
果 。 如 果 想 让 其 中 的 某 个 按钮 为 默认 值 ,只 要 在 input 标记 码 中 加 入 checked( 已 选择 ) 属 
性 即 可 。 复 选 框 中 name 可 以 选取 不 同 的 名 称 x1,x2,x3,… ,保存 不 同 选 项 结果 。 


2.5.5 下 拉 菜 单 与 滚动 菜单 组 件 


下 拉 菜 单 与 滚动 菜单 的 功能 与 单 选 框 类 似 , 也 是 方便 用 户 通过 选择 输入 信息 。 

下 拉 菜 单 以 过 form 二 标记 码 开 始 ,使 用 二 select 二 标记 码 告诉 浏览 器 显示 一 个 给 定 菜 
单 选项 的 下 拉 菜 单 组 件 。 通 过 二 option 记 标记 码 与 菜单 选项 文本 给 出 下 拉 菜 单 的 菜单 内 
容 。 下 拉 菜 单 组 件 的 宽度 默认 情况 下 由 最 长 的 选择 项 确定 。 

滚动 菜单 只 是 在 下 拉 菜 单 二 select 二 标记 码 中 加 入 multiple 属性 ,允许 用 户 一 次 选择 
多 个 选项 ,类 似 复 选 框 如 二 select multiple size 一 x 二 。size 属性 定义 显示 在 菜单 里 的 选择 
项 (或 选择 行 ) 数 。 滚 动 菜单 的 宽度 同样 由 最 长 的 选择 项 的 宽度 决定 。 

例 2.18 包含 下 拉 菜 单 与 滚动 菜单 组 件 的 文档 (2-18. html 文件 ) 。 


<html> 
<body> 


< form> 
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下 拉 菜 单 中 任 选 一 个 

< select name=x1> 

<option> 北 京 汽 车 站 

<option> 上 海 汽车 站 

<option> 武 汉 汽 车 站 

<option> 重 庆 汽 车 站 

</select> 

<P>< input type= "submit" value= "提交 "> 
<input type= "reset" value= " 重 置 "> 
<P> 滚 动 菜单 可 多 选 <P> 

< select name=x] multiple size= 5> 
<option> 苹果 

<option> 香蕉 

<option> 葡萄 

<option> 樱 桃 

< Option> 草莓 

<option> 弄 

< /select> 

<p><input type= "submit" value= "提交 "> 
< input type= "reset" value= " 重 置 "> 
< /form> 

< /body> 

</html> 


2-18. html 显示 结果 如 图 2. 18 所 示 。 


本 


滚动 菜单 可 多 选 


陆 计算 机 | 保护 模式 : 禁用 瑟 100% ~ :| 


2.18 添加 下 拉 革 单 与 滚动 菜单 的 页 面 
注意 : 要 添加 输入 信息 的 表单 组 件 必须 以 一 form 二 开始 ,以 一 /form 二 结束 。 一 个 页 面 
可 以 添加 多 个 表单 标记 码 , 每 当 新 加 入 一 个 二 form 一 标记 码 , 浏 览 器 就 产生 一 个 新 的 段落 。 
几 nd46 。 


可 以 将 多 个 form 组 件 放 在 同一 对 一 form 二 一 /form 二 标记 码 中 ,而 无 须 添 加 一 个 组 
件 元 素 就 放 上 一 对 一 form 盖 一 /form 二 标记 码 。 

HTML 语言 的 标记 码 就 介绍 到 这 里 ,虽然 只 讲 了 一 部 分 标记 码 , 但 编写 html 文档 已 
经 够 用 了 ,其 他 内 容 可 以 在 实践 中 继续 学 习 。 现 在 可 以 欣赏 别人 的 HTML 网 页 ,也 可 以 
自己 编写 简单 的 HTML 网 页 了 。 

学 到 这 里 是 不 是 觉得 HTML 语言 编程 的 技术 很 简单 呢 ? 实际 上 ,只 要 记 住 两 个 原 
则 : 一 个 是 以 王 HTML 二 开始 和 以 二 /HTML 二 结束 ,再 一 个 就 是 在 一 标记 码 二 (前 面 的 
开始 标记 码 ) 中 添加 属性 参数 ,属性 参数 虽然 看 起 来 挺 多 ,但 许多 是 通用 的 。 如 果 有 兴趣 
想 了 解 更 多 的 HTML 标记 码 , 可 继续 自学 下 去 ,因为 还 不 断 会 有 新 的 标记 码 出 现 。 


2.6 思考 与 练习 


2.6.1 思考 题 


2-1 什么 是 HTML 语言 ? 它 有 什么 特点 ? 

2-2 HTML 文档 的 主要 作用 是 什么 ? 

2-3 HTML 语言 有 哪些 类 型 的 基本 标记 码 ? 

2-4 地 图 标记 、 表 单 标记 、 框 架 标 记 有 什么 相同 处 ? 它们 与 其 他 标记 有 什么 不 同 处 ? 


2.6.2 上 机 练习 


2-1 使 用 Word 编写 一 个 HTML 文件 , 存 为 2-1. html, 并 在 浏览 器 中 运行 一 遍 。 
2-2 ”使 用 “附件 ”的 “记事 本 ”编写 一 个 HTML 文件 , 存 为 2-2. html, 并 在 浏览 器 中 运 


2-3 ”使 用 FrontPage 工具 编写 或 编辑 一 个 HTML 文件 , 存 为 2-3. html, 并 在 浏览 器 
中 运行 一 遍 。 

2-4 编写 一 个 带 有 表格 .图片 和 文字 的 页 面 ,并 添加 背景 颜色 和 背景 音乐 。 

2-5 编写 带 有 不 同 超 链接 的 HTML 文件 。 

2-6 ”编写 一 个 带 有 map 标记 码 的 页 面 

2-7 ”编写 一 个 带 有 表单 的 页 面 ,包括 文本 框 \ 口 令 框 , 单 选 框 、 下 拉 菜 单 组 件 。 
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第 8 商 | 


脚本 语言 


JavaScript 


使 用 JavaScript 脚本 语言 ,可 使 HTML 网 页 具有 简单 的 动态 性 与 计算 功能 。 
JavaScript 可 以 内 入 到 HTML 文档 与 超 文 本 标识 语言 一 起 显示 页 面 信息 ,实现 在 页 面 中 
与 用 户 的 交互 功能 ,开发 能 在 客户 端 完 成 的 Web 应 用 程序 。 

本 章 主 要 解决 以 下 问题 ， 

。 什么 是 JavaScript; 

。 如 何 将 JavaScript 脚本 代码 让 入 到 HTML 文档 ; 

。 什么 是 JavaScript 对 象 ; 

。 如 何 使 用 JavaScript 对 象 的 属性 与 方法 ; 
。 如 何 定义 JavaScript 变量 ; 

。 如 何 创 建 JavaScript 函数 ; 

。 如 何 控制 JavaScript 语句 的 流程 ; 

。 什么 是 JavaScript 事件 与 事件 处 理 方法 ; 
。 如 何 编写 与 使 用 单独 保存 的 JS 文件。 


3.1 在 HTML 中 插入 JavaScript 


本 节 主 要 解决 什么 是 JavaScript、 如 何 将 JavaScript 脚本 代码 嵌入 到 HTML 文档 、 什 
么 是 JavaScript 对 象 ,如何 使 用 JavaScript 对 象 的 属性 与 方法 等 问题 。 


3.1.1 什么 是 JavaScript 


JavaScript 是 Java 的 子 集 ,具有 Java 语言 的 基本 语句 ,具有 Java 语言 的 基本 特性 ,是 
由 对 象 、 对 象 属性 与 对 象 方法 (函数 ) 构 成 的 ,是 一 种 基于 对 象 和 事件 驱动 .具有 安全 性 的 
脚本 语言 ,其 主要 特点 是 比 Java 语言 容易 理解 ,能 与 HTML 语言 一 起 完成 显示 页 面 信息 
的 任务 。 

可 能 有 人 会 问 ,运行 JavaScript 需要 新 的 软件 环境 支持 吗 ? 回答 是 不 用 ,与 HTML 
语言 相同 ,还 是 使 用 Web 浏览 器 。 目 前 大 部 分 的 Web 浏览 器 都 支持 JavaScript 的 功能 。 


os. = 


3.1.2 在 HTML 文档 中 插入 JavaScript 语言 的 方式 
1. 将 JavaScript 代码 插入 到 HTML 文档 


例 3.1 一 个 包含 有 JavaScript 语言 的 HTML 文档 (3-1. htm) 。 


<html> 

<body> 

<script language= "JavaScript"> 
/* 隐藏 下 面 Javascript 语句 

多 行 注释 

多 行 不 显示 

多 行 不 显示 的 情况 * / 

document .write ("<h4> 这 是 我 们 第 一 次 使 用 Javascript 语言 </h4><hr>") 
// 隐 藏 一 行 

</script> 

< /body> 

</html> 


保存 文件 为 3-1. htm, 在 浏览 器 打开 3-1. htm 网 页 ,可 以 看 到 如 图 3. 1 所 示 页 面 。 


图 3.1 网 页 3-1. htm 的 运行 结果 


2. 知识 点 归纳 


1) 插入 JavaScript 语言 的 二 script 盖 所 /script 二 标记 码 

从 3-1. htm 中 可 以 看 出 JavaScript 语言 是 通过 二 script 记 二 /script 记 标记 码 对 插入 
到 HTML 文档 中 的 ,而 且 可 以 放 在 HTML 文档 中 的 任何 地 方 。 它 以 二 script language 
一 "JavaScript" 盖 开始 ,以 二 /script 盖 结束 。 

插入 JavaScript 语言 的 语法 格式 : 


< Script language= "JavaScript"> 
JUavaScript 语 句 


< /script> 
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2) JavaScript 命令 的 大 小 写 之 别 

JavaScript 与 Java 命令 一 样 区 别 大 小 写 。 因 此 ,在 3-1. htm 中 的 JavaScript 命令 代 
码 都 是 小 写字 母 , 如 例子 中 的 document. write( ) 语 句 。 

3) JavaScript 的 注释 标记 

JavaScript 有 自己 的 注释 标记 。 用 来 告诉 浏览 器 将 JavaScript 语句 隐藏 起 来 不 显示 。 

JavaScript 注释 标记 的 语法 格式 : 

// 一 行 注释 

/* 多 行 注释 * / 

说 明 : // 标记 注释 一 行 , 即 一 行 不 显示 ,而 / *… x* /标记 可 以 将 多 行 隐 藏 起 来 不 
显示 。 

4) document 对 象 及 write 方法 

document 对 象 为 JavaScript 内 置 的 文档 对 象 , 它 具有 write() 方 法 ,可 以 在 页 面 中 显 
示 指 定 的 文字 。 


3.1.3 使 用 JavaScript 对 象 属 性 与 方法 
1. 创建 一 个 包含 多 个 JavaScript 对 象 的 文档 


例 3.2 一 个 使 用 JavaScript 的 document 对 象 的 lastModified 属性 显示 最 后 修改 日 
期 .使 用 window 对 象 的 alert 方法 显示 一 个 提示 对 话 框 、 使 用 window 对 象 的 prompt() 
方法 显示 一 个 输入 信息 对 话 框 的 文档 (3-2. htmy) 。 

<html> 

<body> 

<br> 上 次 修改 时 间 : 

< Script language= "JavaScript"> 

document .write (document .lastModified) 

alert ("欢迎 你 第 二 次 使 用 Javascript") 

prompt ("请 输入 你 的 姓名 :", "张驰 ") 

</script> 

< /body> 

</htm> 


在 浏览 器 打开 3-2. htm 网 页 ,可 以 看 到 如 图 3.2 所 示 页 面 。 
2. 知识 点 归纳 


1) 调用 对 象 方法 和 属性 的 方式 

在 3-2. htm 中 使 用 了 document 对 象 的 write() 方 法 和 1lastModified 属性 。 在 
document. write() 语 句点 (. ) 左 边 是 “document” 对 象 名 ,点 (. ) 右 边 write 为 document 对 
象 的 方法 名 ,write() 方 法 的 功能 是 输出 圆 括号 内 的 参数 值 到 窗口 。JavaScript 语言 通过 
对 象 定义 其 方法 ,通过 对 象 名 . 方法 名 来 调用 对 象 的 方法 完成 指定 的 功能 。 例 如 通过 


m5O 。 


看 cALpsHAONpshaov \3-2.htm - w- 己 
oa 
GO- | 大 CALPSHAONpshat ~ | | x 中 cocooe 


容易 | 臣 caLpsHAoNpshaoyB.- i 从 ~ 国 - 昭 - 


~ 全 欢迎 你 第 一 次 使 用 Javascript 
上 次 修改 时 间 :， 03/51/2008 16:16:23 


wd 确定 从 


陋 计算 机 | 保护 模式 : 禁用 组 100%6 ~ 


(a) 网 页 3-2.htm 的 运行 结果 (b) 提示 对 话 框 


(0) 输入 信息 对 话 框 
图 3.2 例 3.2 程序 运行 结果 


document. write() 调 用 了 document 对 象 的 write() 方 法 。write() 方 法 完成 显示 信息 的 
任务 ,显示 的 信息 由 圆 括号 对 内 的 参数 提供 。 

调用 对 象 方法 和 使 用 对 象 属性 有 如 下 语法 格式 : 

对 象 名 .方法 名 ([ 参 数 ]) 

对 象 名 .属性 名 

2) alert 方法 的 功能 

在 3-2. htm 中 还 使 用 了 window 对 象 的 alert 方法 , 它 的 功能 是 显示 一 个 带 有 提示 信 
息 的 对 话 框 , 如 图 3. 2 所 示 。alert() 方 法 一 般 用 于 提示 或 提醒 用 户 某 一 事情 。 

调用 alert 方 法 的 语法 格式 : 


alert ("提示 信息 ") 


提示 对 话 框 中 的 提示 信息 由 alert() 插 号 内 的 “提示 信息 ”定义 。 单 击 对 话 框 “确定 ” 
按钮 ,对 话 框 会 消失 。 

alert() 方 法 前 面 没 有 对 象 名 ,这 是 因为 alert() 方 法 为 window 对 象 的 方法 ,没有 指明 
对 象 名 ,JavaScript 默认 为 window 对 象 。 

3) prompt() 方 法 的 功能 

在 3-2. htm 中 还 使 用 了 windovw 对 象 的 prompt() 方 法 , 它 的 功能 是 显示 一 个 可 以 让 
用 户 输入 信息 的 对 话 框 。 输 入 信息 对 话 框 由 “提示 信息 ”“ 初 值 ”一 个 “确定 ”按钮 和 一 个 
“取消 ”按钮 组 成 , 单 击 “ 确 定 ” 按 钮 可 以 提交 用 户 输入 的 信息 ,同时 关闭 对 话 框 。 

调用 prompt() 方 法 的 语法 格式 : 


prompt ("提示 信息 "," 初 值 ") 
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prompt() 方 法 的 括号 中 包括 了 两 个 字符 串 ,一 个 是 要 显示 的 信息 ,一 个 是 输入 文本 
框 内 显示 的 初始 信息 ,本 例 中 为 “张驰 ”, 也 可 以 什么 都 不 写 或 写成 任意 字符 。 所 用 的 引号 
一 定 要 成 对 使 用 ,不 能 是 一 个 双 引 号 一 个 单 引 号 。 引 号 一 定 为 西 文 的 。 


3.2 ， JavaScript 变量 .数据 类 型 与 表达 式 


本 节 主 要 解决 如 何 声明 保存 数据 的 JavaScript 变量 ,有 哪些 类 型 的 JavaScript 数据 ， 
有 哪些 类 型 的 数据 运算 符 , 有 哪些 类 型 的 表达 式 等 问题 。 


3.2.1 声明 JavaScript 变量 的 方式 


1. 变量 与 常量 


在 例 3. 2 中 使 用 对 话 框 输入 的 消息 都 丢失 了 ,怎样 才能 保存 用 户 在 页 面 上 输入 的 信 
息 呢 ? 可 以 使 用 变量 。 

变量 是 计算 机 提供 的 存放 数据 的 内 存 空间 的 代号 。 变 量 的 功能 就 是 保存 数据 ,存放 
在 变量 中 的 数据 可 以 改变 ,也 就 是 说 变量 可 以 保存 不 同 的 数据 。 

常量 是 计算 机 中 存放 固定 不 变数 据 的 内 存 空间 的 代号 。 

在 JavaScript 中 使 用 变量 和 常量 前 要 先 声明 其 代号 , 即 变量 名 ,如 图 3. 3(Ca) 所 示 ,在 
应 用 程序 中 通常 用 拼音 字母 或 英文 单词 作为 变量 名 (变量 的 代号 ) 。 

常量 在 使 用 过 程 中 存放 的 是 固定 不 变 的 数据 ,如 图 3. 3(b) 所 示 。 

变量 在 使 用 过 程 中 可 以 不 存放 数据 (为 空 ) ,也 可 以 存放 不 同 数据 ,如 图 3.3(b) 与 (c) 


(c) 有 数据 的 变量 


2. 在 程序 中 声明 变量 
例 3.3 带 有 JavaScript 变量 ,并 给 变量 赋值 的 文档 (3-3. htmy) 。 


<html> 

<body> 

< script language= "Javascript"> 

var name=Prompt ("请 输入 你 的 姓名 :", "张驰 中 


Var x=7 
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var y=8 

document .write ("欢迎 你 ,"+name) 
document .write ("<p>x+y= "+ (x+y)) 
</script> 

< /body> 

</htm> 


在 浏览 器 打开 3-3. htm 网 页 ,可 以 看 到 如 图 3.4 所 示 页 面 


欢迎 你 ，slp 


xty=15 


图 3.4 网 页 3-3. htm 的 运行 结果 


在 图 3.4 所 示 的 输入 对 话 框 输入 slp,; 单 击 “ 确 定 ” 按 钮 ,在 浏览 器 中 可 以 看 到 如 
图 3.4 所 示 的 结果 .可 以 输入 任意 一 个 名 字 ,会 看 到 输入 的 名 字 显 示 在 页 面 上 。 


3. 知识 点 归纳 


1) 声明 变量 的 方法 

JavaScript 声明 变量 的 方法 和 变量 赋值 的 语法 格式 : 

var 变量 名 = 数据 值 

JavaScript 的 var 关键 字 用 来 声明 一 个 JavaScript 变量 ,并 将 “数据 值 ” 赋 给 变量 。 例 
如 ,在 3-3. htm 中 用 var 定义 了 3 个 变量 xy 和 name, 并 将 7,8 数据 值 赋 给 了 变量 x、y。 
另外 将 prompt() 方 法 得 到 的 数据 “slp” 赋 给 了 变量 name。 给 变量 赋值 所 用 的 等 号 (= 一) 称 
为 赋值 运算 符 。 

2) 选取 变量 名 的 规则 

变量 名 对 大 小 写 非常 敏感 ,大 小 写字 母 代表 不 同 的 变量 。 男 外 ,变量 名 称 的 长 度 是 任 
意 的 ,但 必须 遵循 以 下 规则 : 

。 第 一 个 字符 必须 是 一 个 字母 (大 小 写 均 可 )、 或 一 个 下 划 线 (_) 或 一 个 美元 符 

和 全 

。 后 续 的 字符 可 以 是 字母 .数字 .下划线 或 美元 符 。 

。 变量 名 称 不 能 是 JavaScript 的 关键 字 。 

变量 可 以 用 来 保存 数据 ,JavaScript 中 的 数据 指 的 是 什么 呢 ? 数据 有 什么 不 同 吗 ? 


”各 侈 


3.2.2 JavaScript 的 数据 类 型 


JavaScript 有 6 种 数据 类 型 。 不 同类 型 的 数据 可 以 表示 不 同 的 信息 ,进行 不 同 的 数 
据 计算 。 


1. 数值 数据 类 型 


数值 数据 类 型 包括 整 型 int, 例 如 12、22。 整 型 数 可 以 为 正 数 .0 或 者 负数 ; 浮 点 型 
float, 例 如 7.254.、 一 3.4、2E5, 浮 点 数 可 以 包含 小 数 点 、 也 可 以 包含 一 个 e( 大 小 写 均 可 ,在 
科学 记 数 法 中 表示 “10 的 寡 ”) ,或 者 同时 包含 这 两 项 。 


2. 字符 串 类 型 string 

例如 “你 好 !”“Hello!1”“254” 都 是 string 类 型 的 数据 。 字 符 串 数据 必须 使 用 单 引 号 
或 双 引 号 括 起 来 。 

3. 逻辑 类 型 boolean 

boolean 数据 类 型 的 值 只 有 两 个 : true 与 false。 这 是 两 个 特殊 值 ,不 能 使 用 1 和 0 
代替 。 

4. 空 数 据 类 型 null 

null 数据 类 型 只 有 一 个 值 null, 表 示 没 有 任何 值 , 它 表示 什么 也 没有 。 空 null 与 0 值 
或 空 字符 串 "" 是 不 一 样 的 ,0 值 或 空 字符 串 "" 是 一 个 实际 值 。 

5. undefined 未 定义 数据 类 型 

undefined 数据 类 型 只 有 一 个 值 undefined, 表 示 变 量 被 创建 后 未 给 该 变量 赋值 。 如 


果 对 象 属性 不 存在 , 声明 了 变量 但 从 未 赋值 ,将 返回 undefined 值 。 例 如 可 使 用 语气 
if(typeof(x) 一 一 “undefined") 判 别 变量 x 是 否 赋值 。 


6. Object 对 象 类 型 


除了 上 面 提 到 的 各 种 常用 类 型 外 ,JavaScript 中 包含 对 象 类 型 。 表 示 数 据 为 某 种 对 
象 (类 ) 。 

变量 和 常量 也 具有 数据 类 型 。 变 量 的 数据 类 型 根据 其 赋值 的 数值 的 数据 类 型 来 
确定 。 


3.2.3 JavaScript 的 运算 符 
运算 符 即 对 数据 进行 运算 的 符号 ,JavaScript 按照 运算 元 素 的 个 数 可 分 为 一 元 、 二 元 
和 三 元 3 种 运算 符 ,一 元 运算 符 只 有 一 个 运算 元 素 , 如 x 十 十 或 十 十 x; 二 元 运算 符 有 两 
个 运算 元 素 , 如 5* 4; 三 元 运算 符 具 有 三 个 运算 元 素 。 
按照 运算 符 的 运算 规律 来 划分 有 如 下 6 种 运算 符 : 
js4 = 


1. 赋值 运算 符 


赋值 运算 符 有 如 下 6 种 类 型 : 

(1)“ 二 ”表示 将 右边 数 赋值 给 左边 变量 。 例 如 X= 二 5,5 被 赋 给 了 义 。 

(2)“ 十 二 ”表示 左 、 右 两 边 数 相 加 ,结果 赋 给 左边 变量 。 例 如 X= 二 5,Y 二 5,X 十 二 了 
将 10 赋 给 了 X。 


(3)“ 一 一 ”表示 左右 两 边 数 相 减 ,结果 赋 给 左边 变量 。 例 如 X 一 5,Y 一 5,X 一 一 Y 
将 0 赋 给 了 X。 

(4)“# 一 ”表示 左右 两 边 数 相 乘 ,结果 赋 给 左边 变量 。 例 如 X 一 5,Y 一 5,Xx 一 了 
将 25 赋 给 了 X。 

(5)“/ 一 ”表示 右边 数 除 左 边 数 ,结果 赋 给 左边 变量 。 例 如 X= 二 5,Y 二 5,X/ 二 了 将 1 
赋 给 了 X。 


(6)“% 二 ”表示 右边 数 除 左 边 数 ,余数 赋 给 左边 变量 。 例 如 X 一 25,Y 一 7,X%% 一 了 
将 4 赋 给 了 X。 


2. 算术 运算 符 
算术 运算 符 有 加 “十 ” 减 “一 ”. 乘 * *”、 除 */”、 取 余 “%” 和 取 负 X 一 一 X、 加 1“ 十 十 ”， 
减 1" 一 一 "等 。 


例如 了 阅 = 十 十 5,YY 的 值 为 6; 例 如 Y= 一 一 6,Y 的 值 为 5。 其 他 运算 符 的 含义 与 平时 
的 数值 运算 一 样 ,例如 XX==54 十 5 * 2,X 的 值 为 44。 


3. 字符 串 运算 符 


字符 串 运 算 符 只 有 一 个 合并 运算 符 “ 十 ”, 表 示 将 两 个 字符 串 合 并 在 一 起 ,例如 : 
labc' 十 "你 好 !1" ,合并 后 的 值 为 “abc 你 好 1”。 


4. 比较 运算 符 


比较 运算 符 有 如 下 6 种 类 型 : 

(1)“ 一 一 ”: 如 果 两 边 数据 相等 返回 true。 例 如 : 2 一 一 2 返回 true。 

(2)“! 一 ”: 如 果 两 边 数据 不 相等 返回 true; 例 如 :“THE”! 二 “TH” 返 回 true。 
(3)“ 二 ”: 如 果 左 边 数 大 于 右边 数 返回 true; 例 如 : 2 二 1 返回 true。 

(4)“<”: 如 果 左 边 数 小 于 右边 数 返回 true。 

(5)“ 盖 一 ”: 如 果 左 边 数 大 于 或 等 于 右边 数 返回 true。 

(6) “去 一 ”: 如 果 左 边 数 小 于 或 等 于 右边 数 返 回 true。 


5. 逻辑 运算 符 
逻辑 运算 符 有 如 下 3 种 类 型 ; 


(1)“&.&.”, 称 为 逻辑 与 , 当 表 达 式 两 边 的 逻辑 值 都 是 true 时 结果 为 true, 和 否则 结果 
为 false。 例 如 : 2 二 1 && 5 一 4, 其 结果 为 true;2 盖 1 & 8& 5 二 4, 其 结果 为 false。 


。 SSwf 人 | 


(2)“||1”: 称 为 逻辑 或 , 当 表 达 式 两 边 的 逻辑 值 中 任意 一 个 是 true 时 结果 为 true, 当 
表达 式 两 边 的 逻辑 值 都 为 false 时 结果 为 false。 例 如 ,2 二 1 || 5 二 4, 其 结果 为 true。2 二 
1 |15 福 4, 其 结果 也 为 true。 

(3)“!”: 称 为 逻辑 非 , 当 表达 式 的 逻辑 值 为 true 时 返回 结果 false, 当 表达 式 的 逻辑 
值 为 false 时 返回 结果 true。 例 如 : !2 二 1 结果 为 false。 


6. 条 件 运算 符 


条 件 运 算 符 只 有 一 个 “?”, 条 件 运 算 符 与 上 面 的 运算 符 略 有 不 同 。 条 件 表达 式 的 结构 
如 下 。 


(条 件 )? 结果 1: 结 果 2 


首先 计算 条 件 ( 逻 辑 表 达 式 或 比较 表达 式 ) 的 值 , 值 为 true 表达 式 的 值 为 结果 1, 值 为 
false 表达 式 的 值 为 结果 2。 例 如 ,条 件 表达 式 如 下 : 


(day= = "星期 六 中 ?" 今 天 是 周末 ":" 今 天 不 是 周末 " 


当 变 量 day 为 “星期 六 ”时 表达 式 的 结果 为 “今天 是 周末 ”, 否 则 结果 为 “今天 不 是 周末 ”。 
条 件 运算 符 为 三 元 运算 符 。 


7. 运算 符 优先 级 


当 表 达 式 里 有 多 种 运算 符号 的 时 候 , 运 算 的 次 序 是 什么 呢 ? 其 优先 级 从 高 到 低 顺 
序 为 : 

(1) 乘 \ 除 、 模 (x 、/、%); 

(2) 加 、 减 (十 、 一 ); 

(3) 比较 (天 、 > 、 天 = 一、 一、 一 一 、! 一 ); 

(4) 逻辑 与 (&&.); 

(5) 逻辑 或 (| | ); 

(6) 条 件 (?)。 

优先 级 指 的 是 复合 运算 进行 计算 时 的 先后 顺序 ,对 于 所 有 的 二 元 运算 都 是 从 左 到 右 
进行 计算 ,可 以 用 圆 括号 () 来 忽略 优先 级 , 即 () 小 括号 优先 级 最 高 。 例 如 : 

。 算术 表达 式 (5 十 4) x* 5 的 值 为 45, 而 5 十 4x5 的 值 为 25。 

。 逻辑 表达 式 false| |true&&false 的 值 为 false; 

。 条 件 表达 式 4 x* 5 十 18 盖 22 的 值 为 “对 ”。 


3.2.4 JavaScript 的 表达 式 

1. JavaScript 表达 式 

JavaScript 表达 式 是 JavaScript 变量 .常量 运算 符 以 及 表达 式 的 任意 组 合 。 
JavaScript 表达 式 的 计算 结果 为 一 个 数据 值 , 表 达 式 的 类 型 确定 其 值 的 数据 类 型 。 


Js6 . 


2. JavaScript 表达 式 的 类 型 


根据 组 合 表 达 式 运算 符 的 类 型 ,JavaScript 的 表达 式 可 分 为 6 种 类 型 : 赋值 表达 式 、 
算术 表达 式 .字符 串 表 达 式 、 比 较 表 达 式 、 逻 辑 表达 式 和 条 件 表 达 式 。 
例 3.4 使 用 JavaScript 表达 式 , 给 出 表达 式 结果 的 文档 (3-4. htmy) 。 


<html> 

<head> 

<script language= "JavaScript"> 
Var question= "10+ 20 是 多 少 ?"; 
Var answer= 30; 

var xl= "计算 正确 "; 

var x2= "计算 错 了 "; 

Var x5=prompt (question, "0"); 
Var output= (x5==answer)? x1:x2; 
</script> 

< /head> 

<body> 

< Script language= "JavaScript"> 
document .write (output); 
</script> 

< /body> 

</html> 


在 浏览 器 打开 3-4. htm 网 页 ,可 以 看 到 如 图 3.5 所 示 对 话 框 ,输入 30 并 单 击 “ 确 定 ” 
按钮 后 ,会 出 现 图 3.5 所 示 页 面 。 


Explorer 用 户 提示 
脚本 提示 : 


10+20 是 多 少 ? 


(a) 输入 对 话 框 
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(b) 网 页 3-4.htm 的 运行 结果 
图 3.5 例 3.4 程序 运 行 结果 
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3. 知识 点 归纳 


1) 条 件 表达 式 的 使 用 方式 

在 3-4. htm 里 使 用 了 条 件 表达 式 ((x5 一 一 answer)? xl:x2), 并 将 结果 值 赋 给 了 变 
量 output ,其 中 变量 x5 的 值 是 由 用 户 输入 的 。 

2) 定义 变量 在 HTML 文档 的 位 置 

3-4. htm 中 把 变量 的 定义 都 放 在 了 HTML 文档 的 头 部 ,把 输出 的 结果 放 在 HTML 
文件 的 主体 中 ,这 样 写 代 码 可 以 使 程序 清晰 ,容易 看 懂 。 这 个 习惯 可 看 成 是 一 个 书写 
JavaScript 代码 的 规则 。 

3) JavaScript 命令 行 的 结束 标志 (;) 

在 3-4. htm 中 每 个 JavaScript 命令 行 都 添 了 加 分 号 (;) ,一行 可 以 写 多 个 JavaScript 
命令 ,只 要 用 分 号 (;) 分 开 即 可 。 为 了 统一 起 见 , 本 书 在 JavaScript 的 每 个 命令 行 都 使 用 
了 分 号 (如 果 一 行 只 有 一 个 JavaScript 命令 语句 ,不 加 分 号 (;) 也 是 可 以 的 ), 但 要 注意 必 
须 是 西 文 方式 的 分 号 (;) ,代码 中 其 他 的 符号 也 要 用 西 文 符号 ,否则 会 出 错 。 

4) 在 HTML 文档 插入 JavaScript 语句 的 次 数 与 位 置 

在 3-4. htm 中 可 以 看 到 插入 了 两 次 JavaScript 语句 。 根 据 需 要 在 HTML 文件 中 可 
以 多 次 插入 JavaScript 语句 ,而 且 可 以 在 任何 地 方 插入 。 


3.3 JavaScript 对 象 实例 与 函数 


本 节 主 要 解决 如 何 创 建 一 个 对 象 实例 .如何 通过 对 象 实例 调用 对 象 的 方法 与 属性 ,如 
何 创 建 JavaScript 的 自 定义 函数 等 问题 。 


3.3.1 创建 JavaScript 的 对 象 实例 


1. 什么 是 对 象 实例 


在 JavaScript 中 有 许多 已 定义 好 的 内 置 对 象 ,如 窗口 对 象 window、 文 档 对 象 
document .日 期 对 象 Date 等 。 

什么 是 对 象 实例 呢 ? 为 什么 要 创建 对 象 实例 呢 ? 

对 象 实例 即 对 象 的 一 个 具体 例子 .可 以 用 任意 名 字 来 定义 对 象 实例 。 对 象 实例 是 一 
个 具体 的 对 象 , 它 上 具有 原 对 象 的 一 切 属性 和 方法 ,通过 对 象 实例 还 可 以 定义 新 的 属性 和 方 
法 。 有 的 对 象 的 属性 与 方法 必须 通过 对 象 实例 才能 调用 。 


2. 在 程序 中 创建 对 象 实例 
例 3.5 包含 Date 对 象 实例 ,显示 计算 机 的 当前 日 期 和 时 间 的 文档 (3-5. htmy) 。 


< html> 
<body> 
< script language= "JavaScript"> 


today= new Date () 


js8 


document .write (" 现 在 的 时 间 是 :",today-getHours () ,":"vtoday-getMinutes ()) 

document. write ("< br> 今 天 的 日 期 是 :",，today. getMonth () + 1,"/", today. 
getDate(),"/",today.getYear ()) 

</script> 

< /body> 

</htm> 


在 浏览 器 打开 3-5. htm 网 页 ,可 以 看 到 如 图 3.6 所 示 页 面 。 
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现在 的 时 间 是 : 21:10 
今天 的 日 期 是 ，3/31/2008 
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图 3.6 网 页 3-5. htm 的 运行 结果 


3. 知识 点 归纳 


1) 创建 对 象 实例 的 方式 

在 3-5. htm 中 ,Today 为 日 期 对 象 Date 的 对 象 实例 , 它 继 承 了 Date 对 象 的 所 有 属性 
和 方法 。 使 用 new 语句 可 以 建立 一 个 对 象 实例 。 

创建 对 象 实例 的 语法 格式 : 


实例 名 =new 对 象 名 ( ) 


2) 通过 对 象 实例 调用 原 对 象 的 属性 与 方法 

在 3-5. htm 中 Date() 的 对 象 实例 today 能 调用 Date() 的 属性 与 方法 ,在 创建 对 象 实 
例 today 时 如 果 未 在 Date(C) 中 指定 具体 日 期 与 时 间 , 将 使 用 本 地 计算 机 的 当前 时 间 初 始 
化 实例 对 象 ,因此 ,通过 today 对 象 的 get… 方 法 可 以 得 到 当前 时 间 与 日 期 。 

注意 getMonth 属性 所 取得 的 月 份 范 围 是 从 0 到 11, 必 须 加 1 以 才能 代表 现实 中 的 
1 月 至 12 月 。 

在 创建 对 象 实例 today 时 , 如果 Date() 指 定 一 个 具体 日 期 ,如 :， datel 二 new 
Date(2008,08,15) ,使 用 today 的 get… 方 法 将 显示 2008 年 .8 月 、15 日 。 同 样 ,初始 化 时 
可 加 上 时 间 的 定义 ,如 : date2 一 new Date(2008.08.15,10,50,50) 前 三 个 是 日 期 的 年 、 
月 .日 ,后 三 个 是 时 、 分 、 秒 。 


3.3.2 创建 JavaScript 的 自 定义 函数 


1. 什么 是 JavaScript 函数 


什么 是 JavaScript 函数 ? 为 什么 要 使 用 函数 呢 ? 
. 59k 


JavaScript 的 函数 是 执行 某 个 指定 任务 或 功能 的 一 系列 JavaScript 命令 的 集合 。 

通过 调用 一 个 函数 名 能 方便 地 实现 函数 中 定义 的 功能 。 通 过 调用 函数 名 可 以 重复 执 
行 某 种 任务 和 活动 。JavaScript 已 经 定义 好 一 些 内 置 函 数 , 在 编写 JavaScript 脚本 时 可 以 
直接 使 用 。 

这 里 要 介绍 的 是 根据 任务 和 活动 的 具体 内 容 自 定义 函数 的 方式 。 

JavaScript 的 函数 与 JavaScript 的 方法 相似 ,不 同 之 处 是 方法 与 某 个 对 象 有 关系 , 通 
过 对 象 才能 使 用 其 方法 。 而 函数 与 任何 对 象 都 没有 关系 ,可 直接 调用 。 


2. 在 程序 中 创建 自 定义 函数 
例 3.6 一 个 包含 产生 随机 数 的 自 定义 函数 的 文档 (3-6. htmy) 。 


<html> 
<head> 
<script language= "JavaScript"> 
function RandomNumber () { 
today= new Date () 7 
num=Math.abs (Math.sin (today.getTime ())); 
return num; 
} 
</script> 
< /head> 
<body> 
< Script language= "JavaScript"> 
document .write ("这 是 自 定义 函数 RandomNumber () 产 生 的 随机 数 :",RandomNumber ()) 7 
</script> 
< /body> 
</htm> 


在 浏览 器 打开 3-6. htm 网 页 ,可 以 看 到 如 图 3.7 所 示 页 面 。 
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中 这 是 自 定义 函数 RandomNumber 0 产生 的 随机 
数 :0. 31496806778870145 


本 计算 机 | 保护 模式 : 禁用 中 100% ~ 


图 3.7 网 页 3-6. htm 的 运行 结果 


3. 知识 点 归纳 


1) 创建 自 定义 函数 的 方法 
创建 自 定义 函数 的 语法 格式 : 


INmGQ * 


function 函数 名 (参数 1, 参数 2，…) { 
命令 块 
[return x] 


} 


功能 : 定义 一 个 名 称 为 “函数 名 ”的 函数 ,例如 人 RandomNumber()。 通 过 函数 名 可 反 
复 调用 该 函数 ,调用 函数 将 执行 函数 命令 块 中 定义 的 所 有 任务 ,而 且 可 以 得 到 函数 的 返 
回 值 。 

2) 函数 在 HTML 文档 中 的 位 置 

自 定义 函数 放 在 任何 位 置 都 可 以 ,通常 放 在 HTML 文档 的 二 head 二 头 部 ,在 主体 中 
通过 相关 语句 调用 自 定义 函数 。 

3) 函数 名 的 选取 规则 

选取 函数 名 与 选取 变量 名 的 规则 相同 。 

4) 函数 的 参数 

函数 的 参数 要 放 在 括号 内 ,例如 f(x) ,如 果 有 多 个 参数 ,它们 之 间 要 用 逗号 隔 开 。 参 
数 是 函数 或 方法 用 于 其 计算 和 处 理 的 形式 数据 。 参 数 放 在 函数 名 或 方法 名 后 面 的 圆 括号 
对 内 ,调用 孔 数 或 方法 时 将 使 用 具体 的 数据 传递 给 参数 ,函数 通过 参数 接收 数据 ,进行 数 
据 处 理 和 计算 。 需 要 说 明 的 是 函数 也 可 以 不 带 参 数 , 例 如 了 ff()。 

5) 带 返回 值 的 函数 

JavaScript 通过 函数 命令 块 中 的 return 关键 字 给 出 函数 的 返回 值 ,例如 return num。 
这 样 ,调用 随机 函数 RandomNumber 时 , 即 可 得 到 num 的 值 。JavaScript 函数 也 可 以 不 
带 返 回 值 ,不 使 用 return 关键 字 即 可 。 

6) 函数 的 执行 

函数 不 会 自动 运行 ,只 有 通过 调用 函数 的 命令 才能 运行 该 函数 ,执行 函数 中 定义 的 功能 。 


3.4 JavaScript 的 选择 语句 


本 节 主 要 解决 如 何 有 选择 的 执行 JavaScript 的 命令 语句 等 问题 。 
3.4.1 if-else 单 选 语句 
1. 单 选 语句 的 作用 


到 目前 为 止 ,使 用 的 JavaScript 的 命令 语句 都 是 按 行 的 顺序 逐 行 执行 每 条 命令 的 。 
能 否 改变 程序 中 JavaScript 命令 语句 的 执行 顺序 呢 ? 
使 用 寺 else 单 选 语句 可 以 根据 条 件 选择 执行 某 些 命令 语句 ,并 跳 过 一 些 命令 语句 不 执行 。 


2. 在 程序 中 使 用 单 选 语句 


例 3.7 一 个 使 用 ifelse 单 选 语句 ,根据 不 同 的 时 间 显 示 不 同 问候 的 文档 
(327. htmy, 
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<html> 
<script language= "JavaScript"> 
Var messl=""; 
document .write ("<center>< font color= "#0000FF" size=4><b>"); 
day=new Date( ); 
hr=day.getHours( ); 
if ((hr>=6) && (hr<18)) 
{mess1= "现在 是 白天 ,该 工作 了 。"}; 
else 
{mess1=" 现 在 是 黑夜 ,该 休息 了 !1"}; 
document .write (mess1); 
document .write ("< /b>< /font>< /center> "); 
< /script> 
< /html> 


在 浏览 器 打开 3-7. htm 网 页 ,可 以 看 到 如 图 3. 8 所 示 页 面 。 
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现在 是 黑夜 ， 该 休息 了 ! 


图 3.8 网 页 3-7. htm 的 运行 结果 


3. 知识 点 归纳 


1) if-else 单 选 语句 的 结构 
if-else 语句 的 语法 格式 : 
if 条 件 
{JavaSscript 命令 } 
else 
{其 他 命令 } 
功能 : 条 件 为 真 时 执行 计 条 件 下 面 的 命令 ,条 件 为 假 时 执行 else 下 面 的 命令 。 
2) 髋 套 使 用 的 if-else 语句 结构 
组 套 使 用 if-else 的 语法 格式 : 


if 条件 1 
{JavaSscript 命 令 } 


else 


Innsz. 


集 E 条 件 2 
{JavaSscript 命令 } 

else 

{其 他 命令 } 

} 


一 定 要 配套 使 用 。 
3.4.2 ”switch 多 选 语句 
1. switch 多 选 语句 的 作用 


使 用 if-else 单 选 语句 可 以 解决 两 种 情况 下 的 选择 问题 。 当 遇 到 多 种 情况 的 选择 问题 
时 ,虽然 可 以 通过 if-else 的 骨 套 结构 来 解决 ,但 程序 代码 太 鹃 叶 , 有 没有 其 他 的 解决 方 
案 呢 ? 

switch 多 选 语句 是 解决 多 种 情况 选择 的 最 好 方案 。 


2. 在 程序 中 使 用 switch 多 选 语句 


例 3.8 使 用 switch 多 选 语句 ,根据 不 同 的 时 间 显 示 不 同 问候 的 程序 文档 
{3-8. htm)。 


<html> 

< Script language= "JavaScript"> 

Var messl=""; 

day=new Date( ); 

hr=day.getHours( ); 

switch ((hr>=0) && (hr<=4)?1: (hr>=5) && (hr<7)?2: (hr>=7) && (hr<12)?3: (hr>=12) && (hr<15)? 
4: (hr>=15) && (hr<17)?5: (hr>=17) && (hr<18)?6: (hr>=18) && (hr<19)?7:8) 

{ 

case 1: {document .write ("深夜 了 ,注意 身体 ,该 休息 了 !1"); break;} 

case 2: {document .write ("清晨 好 ,这 么 早 就 上 网 呀 ?2"); break;} 

case 3: {document .write(" 早 上 好 ,一 天 之 际 在 于 晨 , 又 是 美好 的 一 天 !"); break;} 
case 4: {mess1l= "该 吃 午饭 啦 ! 有 什么 好 吃 的 ?2"; break;} 

case 5:messl=" 又 要 开始 工作 了 吧 ?2 有 什么 收获 呀 ?";break; 

case 6:messl= "该 休息 一 下 了 ! 准 备 吃饭 吧 !";break; 

case 7:messl=" 了 吃 过 晚饭 了 吗 ?";break; 

default:messl=" 一 天 过 的 可 真 快 ! 今 天 过 的 好 吗 ?"， 

} 

document .write (mess1) 

</script> 


</html> 


在 浏览 器 打开 3-8. htm 网 页 ,可 以 看 到 如 图 3.9 所 示 页 面 。 
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一 天 过 的 可 真 快 ! 今天 过 的 好 吗 ? 


图 3.9 网 页 3-8. htm 的 运行 结果 


3. 知识 点 归纳 


1) switch 多 选 语句 的 结构 
switch 多 选 语句 的 语法 格式 : 
switch (条 件 表达 式 ) { 


case 常量 值 1: 语 句 1; break; 
case 常量 值 2: 语 句 2; break; 


default: 语 名 n; 
} 
2) switch 多 选 语句 的 执行 顺序 
先 计算 switch 后 的 “条 件 表 达 式 ”, 然 后 将 表达 式 的 值 与 各 个 case 后 的 “常量 值 ” 比 
较 , 如 果 表 达 式 的 值 与 某 个 常量 的 值 相 等 ,就 执行 该 常量 值 后 面 的 语句 。 如 果 都 不 相等 ， 
就 执行 default 下 面 的 语句 。 碰 到 break 语句 程序 流程 将 跳出 switch 语句 体 。 
3) default 子 句 
default 子 句 可 以 没有 命令 语句 , 即 什么 都 不 执行 ,直接 跳出 分 支 语 句 。 如 果 有 命令 
语句 , 当 case 语句 都 不 成 立时 ,执行 default 子 句 中 的 命令 。 
4) 使 用 switch 多 选 语句 要 注意 的 事项 : 
。 case 后 面 的 常量 必须 是 整数 或 字符 型 数据 .而 且 不 能 有 相同 的 值 。 
。 通常 在 每 一 个 case 中 都 应 使 用 break 语句 提供 一 个 出 口 ,使 程序 流程 能 够 跳出 多 
选 语句 。 否 则 ,在 第 一 个 满足 条 件 case 后 面 的 所 有 语句 都 会 被 执行 ,这 种 情况 叫 
做 落空 。 


3.5 JavaScript 的 循环 语句 


本 节 主 要 解决 如 何 重复 执行 某 些 JavaScript 的 命令 语句 等 问题 。 


| 


3.5.1 for 循环 语句 
1. 循环 语句 的 作用 


前 面 介绍 的 都 是 线性 的 程序 , 即 每 行程 序 命 令 只 有 一 次 执行 的 机 会 (选择 语句 可 以 跳 
过 一 些 行 代码 不 执行 )。 怎 样 重复 执行 一 些 命令 语句 呢 ? 
循环 语句 可 以 解决 这 个 重复 执行 一 些 命令 语句 的 问题 。 


2. 在 程序 中 使 用 for 循环 语句 
例 3.9 使 用 for 循环 语句 的 程序 文档 (3-9. htmy) 。 


< html> 

<body> 

<script language= "JavaScript"> 

var name=prompt ("请 写 出 你 的 姓名 : ", "lp"); 

document .write ("<h5> 这 是 "+namet+ "喜欢 的 3 种 活动 < /h5>"); 
for (var i=1;i<=3;i++){ 

document .write ("<br>") 

document .write (i+"."+prompt (' 活 动 '+i, ' 活 动 类 型 ')); 
} 

</script> 

< /body> 

</htm> 


在 浏览 器 打开 3-9. htm 网 页 ,输入 三 种 喜欢 的 活动 名 称 ,可 以 看 到 如 图 3. 10 所 示 
页 面 。 
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图 3.10 网 页 3-9. htm 的 运行 结果 


3. 知识 点 归纳 
for 循环 语句 的 语法 格式 : 
fcr ( 初 值 :条件 ; 步 长 表达 式 ){ 
。 65 


命令 

} 

功能 : 循环 前 先 计算 条 件 , 值 为 true( 真 ) 时 ,执行 循环 语句 中 的 命令 , 值 为 false( 假 ) 
时 跳出 循环 语句 ,每 循环 一 次 计数 变量 增加 或 减少 一 个 步 长 单位 的 值 。 

其 中 , 初 值 用 来 设置 计数 变量 并 给 它 赋 值 。 初 值 表达 式 能 够 用 var 来 声明 一 个 新 变 
量 。 步 长 表达 式 用 来 说 明 计 数 变量 的 变化 规律 。 一 般 用 ij、k、1 等 作为 循环 的 计数 变量 。 

i 十 十 表示 每 循环 一 次 i 的 值 加 1。 


3.5.2 for…in 循环 语句 


for…in 循环 语句 可 用 于 在 对 象 的 所 有 属性 内 自动 移 位 。 
for…in 循环 语句 的 语法 格式 : 
for 了 in 对 象 ) { 
命令 语句 
} 


循环 会 从 0 增加 j, 直 到 达到 该 对 象 中 的 最 后 一 个 属性 的 下 标 为 止 。 
3.5.3 while 循环 语句 
while 循环 语句 的 语法 格式 : 
while (条 件 ){ 
命令 
break 


continue 


} 

循环 前 先 计算 条 件 表达 式 , 值 为 真 true 时 ,执行 循环 语句 中 的 命令 , 值 为 false 时 跳 
出 循环 语句 。 

while 循环 中 的 条 件 可 以 是 JavaScript 逻辑 表达 式 。 条 件 为 true 是 ,执行 循环 体 中 
的 命令 语句 。break 语句 可 以 随时 终止 循环 ,即使 循环 没有 结束 也 如 此 。continue 语句 可 
跳 到 循环 体 中 命令 语句 的 第 一 句 开 始 下 一 次 循环 。 

while 循环 一 定 要 注意 其 结束 方式 ,以 防 陷 入 死 循 环 中 出 不 来 。 

break 、continue 命令 在 其 他 循环 中 同样 可 用 。 


3.S.4 使 用 循环 语句 随机 显示 不 同 的 图 片 


能 和 否 在 浏览 器 打开 页 面 时 随机 显示 不 同 的 图 像 文 件 呢 ? 使 用 循环 语句 与 随机 函数 可 
以 解决 这 个 问题 。 交 通 实现 方案 参考 例 3. 10。 
例 3.10 使 用 for 循环 ,随机 显示 不 同 图 像 文件 的 文档 (3-10. htmy) 。 


<html> 


< script language= "JavaScript"> 


W166 。 


a=3; var pp=Math.random(); var pl=Math.round (pp* (a—-1))+1; 
function cil() { 
this.src="'"; 
this.border="'"'; 
this.alt="''; } 
b=new Array () 
for(var i=1; i<=a; i++) {b[i]=new cl()} 
b[1] .src="1.gif";b[1] .border="0";b[1] .alt=""; 
b[2] .src="2.gif";b[2] .border="0";b[2] .alt=""; 
bl[3] .src="3.gif";b[3] .border="0";b[3] .alt=""; 
Var pic=""; 
pic+= "< img src= '+b[P1] .src+ ' border="0"'+" alt= '+b[P1].alt+ '>"'; 
document .write (pic); 
</script> 
刷新 会 显示 不 同 的 图 片 
</html> 


在 浏览 器 打开 3-10. htm 网 页 ,可 以 看 到 如 图 3. 11 所 示 的 页 面 。 单 击 “ 刷 新 ”按钮 ,可 
以 看 到 其 他 图 像 。 
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图 3.11 网 页 3-10. htm 的 运行 结果 


知识 点 归纳 如 下 : 

(1) 隐 式 方式 声明 变量 的 方式 。 在 3-10. htm 可 以 发 现 , 声 明 变 量 时 有 的 变量 用 了 
var 关键 字 , 有 的 没有 用 var 关键 字 。 不 用 var 声明 的 变量 是 以 隐 式 方式 定义 的 变量 。 

(2) this 的 作用 。 在 JavaScript 中 this 有 特殊 的 作用 , 它 表 示 当 前 的 对 象 。 这 里 的 对 
象 是 指 函 数 cl 。 

(3) Array 数组 对 象 。 在 3-10. htm 还 使 用 了 Array 数组 对 象 。 其 实例 对 象 b 为 一 个 
一 维 的 包含 3 个 元 素 的 数组 变量 。 

(4) 使 用 图 像 文件 夹 。 脚 本 程序 用 到 的 3 张 图 片 文件 要 先 存放 在 与 当前 文件 夹 的 子 
文件 夹 img 中 ,名 字 分 别 为 1. gif、2. gif、3. gif。 使 用 图 像 文件 夹 可 以 区 别管 理 不 同 格式 
的 文件 。 
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3.6 JavaScript 的 事件 与 事件 处 理 程序 


3.6.1 什么 是 JavaScript 事件 
1. 什么 是 事件 


事件 通常 是 指 用 户 在 页 面 上 通过 鼠标 进行 活动 时 产生 的 一 种 行为 ,如 单 击 某 个 按钮 
就 是 一 个 事件 ,改变 了 表单 的 文本 域 或 在 链接 上 移动 鼠标 也 是 事件 。 事 件 不 仅 可 以 在 用 
户 交 互 过 程 中 产生 ,浏览 器 自身 的 一 些 动 作 也 可 能 产生 事件 。 例 如 ,打开 浏览 器 载 人 一 个 
网 页 时 ,就 会 产生 一 个 Load 事件 。 关 闭 一 个 页 面 时 ,会 发 生 unload 事件 等 。 

归纳 起 来 ,JavaScript 的 事件 可 以 分 为 如 下 3 种 类 型 : 

(1) 页 面 之 间 跳 转 的 事件 ,主要 是 超 链接 事件 。 

(2) 浏览 器 自身 引起 的 事件 。 

(3) 表单 内 部 元 素 同 页 面 中 元 素 的 交互 事件 。 


2. 事件 处 理 机 制 
为 了 响应 与 处 理事 件 ,JavaScript 定义 了 常见 事件 的 名 称 ,JavaScript 常见 的 事件 有 


blur click change、focus load unload .mouseover、select submit。 事 件 名 前 加 on, 称 为 
事件 处 理 器 ,例如 onChange 和 onClick 等 。 事 件 发 生 后 浏览 器 将 自动 提供 事件 处 理 器 信 
息 ,JavaScript 系统 能 够 根据 事件 处 理 器 名 称 , 调 用 相应 的 事件 处 理 程序 对 事件 进行 处 
理 。 这 就 是 JavaScript 的 事件 处 理 机 制 。 

响应 某 个 事件 而 进行 的 具体 操作 活动 的 程序 称 为 事件 处 理 程序 。 事 件 处 理 程序 通过 
事件 处 理 器 来 调用 。 事 件 处 理 程序 可 以 是 简单 的 JavaScript 命令 语句 ,也 可 以 是 自 定义 
函数 或 对 象 实例 方法 ,用 来 完成 响应 事件 需要 进行 执行 的 任务 与 功能 。 表 3. 1 是 
JavaScript 中 常用 的 一 些 事件 及 事件 处 理 器 名 称 。 

表 3.1 JavaScript 事件 表 


事 件 应 用 对 象 发 生 条 件 事件 处 理 器 
Blur 窗口 和 所 有 表单 元 素 用 户 从 窗口 或 表单 中 移 开 输入 焦点 | onBlur 
Change 文本 框 、 文 本 区 、 单 选 框 等 用 户 改 变 元 素 值 onChange 
Click 按钮 单 选 按钮 、 复 选 框 . 链 接 | 用 户 在 表单 元 素 或 在 链接 上 单 击 ”| onClick 
Error 图 像 .窗口 装载 文档 或 图 像 时 出 错 onError 
Focus 窗口 和 所 有 表单 元 素 用 户 在 窗口 或 表单 元 素 上 聚焦 onFocus 
Load 文档 体 用 户 装载 页 onLoad 
MouseDown “| 文档 ,按钮 .链接 用 户 按 下 一 个 鼠标 键 onMouseDown 
MouseMove | 默认 用 户 移动 光标 onMouseMove 
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续 表 


事 件 应 用 对 象 发 生 条 件 事件 处 理 器 
MouseOver 链接 用 户 在 链接 上 移动 光标 onMouseOver 
Move 窗口 用 户 或 脚本 移动 窗口 onMove 
Reset 表单 用 户 重 置 表单 onReset 
Resize 窗口 用 户 或 脚本 改变 窗口 大 小 onResize 
Select 文本 框 、 文 本 区 用 户 选 择 表单 元 素 的 输入 域 onSelect 
Submit 表单 用 户 提交 表单 onSubmit 
Unload 文档 体 用 户 退 出 页 面 onUnload 


3.6.2 自 定义 函数 构成 的 事件 处 理 程序 


在 打开 某 个 网 站 的 页 面 时 会 出 现 是 否 将 其 添加 到 用 户 收藏 夹 的 对 话 框 窗口 ,这 个 功 
能 是 如 何 实现 的 呢 ? 解决 这 个 问题 可 以 通过 onload 事件 处 理 器 及 自 定义 函数 构成 的 事 
件 处 理 程序 来 解决 。 


1. 在 程序 中 通过 事件 处 理 器 调用 函数 
例 3.11 使 用 onload 事件 处 理 程序 将 页 面 添加 到 用 户 收 藏 夹 的 文档 (为 3-11. htm)。 


<html> 

<head> 

<script language= "javascript"> 
function folder(){ 
window.external .AddFavorite('http://www.sina.com',，' 新 浪 首 页 ') 
} 

</script> 

< /head> 

<body onload= folder ()> 

你 希望 把 新 浪 首 页 添加 到 收藏 夹 吗 ? 
< /body> 

< /html> 


在 浏览 器 打开 3-11. htm 网 页 ,将 弹出 如 图 3. 12 所 示 对 话 框 , 单 击 “ 确 定 ” 按 钮 ,可 添 
加 “新 浪 首 页 ”地 址 到 当前 用 户 浏览 器 的 收藏 夹 中 。 

2. 知识 点 归纳 

1) load( 载 和 页面 ) 事 件 与 onload 事件 处 理 器 


3-11. htm 中 在 load( 载 入 页 面 ) 事 件 发 生 时 ,将 触发 onload 事件 处 理 器 调用 自 定义 函 
数 folder() ,执行 函数 中 定义 的 JavaScript 命令 完成 指定 的 任务 。 
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中 心 。 


| [新建 文件 夹 E) 
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六 


图 3.12 网 页 3-11. htm 的 运行 结 


2) external. AddFavorite() 方 法 

external. AddFavorite() 方 法 的 功能 是 在 下 浏览 器 中 自动 打开 “添加 到 收藏 来” 对 话 
框 ,在 名 称 文本 框 会 出 现 方法 中 确定 的 名 称 , 如 本 例 中 的 “新 浪 首 页 ”, 方 法 中 的 网 址 
http://www. sina. com 可 以 添加 到 收藏 夹 中 。external. AddFavorite() 方 法 只 能 在 IE 浏 
览 器 中 使 用 。 


3.6.3 由 JavaScript 命令 构成 的 事件 处 理 程 序 


对 用 户 在 页 面 文本 框 中 输入 文字 或 数据 能 进行 验证 吗 ? 使 用 JavaScript 的 onchange 
事件 处 理 器 及 事件 处 理 程序 即 可 解决 这 个 问题 。 


1. 在 程序 中 通过 事件 处 理 器 调用 JavaScript 的 命令 语句 


例 3.12 使 用 onchange 事件 处 理 器 确认 用 户 在 页 面 中 输入 的 数据 的 文档 
《3-12. htm)。 


<html> 

<body> 

< form method=post> 

请 输入 你 的 姓名 : <br> 

< input type= "text" onchange= "alert (' 感 谢 你 的 合作 !') :confirm(' 你 想 继续 吗 ? ')"> 
<p> 

请 输入 一 个 小 于 5 的 数 : <br> 

< input type= "text" onchange= "if (parseInt (this.value)<=5) {alert (' 请 你 输入 一 个 比 5 大 的 
数 ")}"> 

<p> 

< /form> 

< /body> 

</htm> 


在 浏览 器 打开 3-12. htm 网 页 ,可 以 看 到 如 图 3. 13 所 示 页 面 。 


mt0 。 


2. 知识 点 归纳 


1) 确认 对 话 框 
3-12. htm 中 当 change( 正 在 进行 的 活动 改变 时 ) 事 件 发 生 时 ,触发 onchange 事件 处 
理 器 直接 调用 JavaScript 命令 alert(' 感 谢 你 的 合作 1 与 confirm(' 你 想 继续 吗 ? 7) 打开 提 
示 对 话 框 与 确认 对 话 框 。 
其 中 ,confirm 方法 用 来 显示 一 个 带 有 “确定 ”和 “取消 ”按钮 的 确认 对 话 框 并 显示 确 
认 信 息 , 单 击 “ 确 定 ” 按 钮 可 继续 输入 , 单 击 “ 取 消 ” 按 钮 可 以 开始 其 他 操作 ,如 图 3. 14 
ay 


文件 对) 咏 辑 让 ) ”查看 以 ) ” 收 障 避 ) 工具 并 帮助 0 


@ 二 -加 -上 国 国 的 | Po ee 3 


地 址 甸 ) 直 DNZHC Wy Web Sitas\ 第 5 宣 \5-12 htm 


请 输入 你 的 姓名 ， i 
>】 As ? 


请 输入 一 个 小 于 5 的 数 ， 


Windows Internet Explorer 


图 3.13 网 页 3-12. htm 的 运行 结 图 3.14 确认 对 话 框 


2) 转换 函数 parseInt 
3-12. htm 中 使 用 转换 函数 parselInt(this. value) ,将 string 类 型 的 数据 this. value( 用 
户 在 文本 框 输入 的 数据 ) 转 换 为 整 型 数据 。 


3.6.4 通过 命令 按钮 实现 数据 计算 功能 
通过 单 击 页 面 上 的 命令 按钮 ,可 以 执行 一 个 指定 的 事件 处 理 程序 。 
通过 程序 中 的 命令 按钮 调用 事件 处 理 器 onclick 


例 3.13 通过 “计算 ”按钮 触发 onclick 事件 处 理 器 调用 cl(form) 函 数 根据 用 户 的 输 
入 进行 数据 计算 ,并 给 出 计算 结果 的 文档 (3-13. htm) 。 


<html> 
< script language= "JavaScript"> 
function cl (form) { 
form.results.value=eval (form.entry.value); 
} 
</script> 
<body> 
< form> 


请 输入 一 个 算术 表达 式 : <br> 
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< input type= "text" name= "entry" value=""><p> 

这 个 表达 式 的 结果 为 : <br> 

< input type= "text" name= "results"> <P> 

< input type= "button" value= "计算 ™ onclick= "cl (this.form);"> 
< /form> 

< /body> 

</htm> 


在 浏览 器 打开 3-13. htm 网 页 ,可 以 看 到 如 图 3. 15 所 示 的 页 面 。 


DF 网站 编程 技术 \ 程 | 
GO Ne orm 


:文件 昌 ”编辑 昌 ” 吾 看 WD) 收藏 只 入 ”工具 中 部 助 (中 


请 输入 一 个 算术 表达 式 : 


2*5+4 


这 个 表达 式 的 结果 为 
14 


[BE 


图 3.15 网 页 3-13. htm 的 运行 结果 


2. 知识 点 归纳 


1) click 事件 与 onclick 事件 处 理 器 

click 为 单 击 按钮 和 超 链 接 的 操作 行为 事件 。 在 3-13. htm 中 ,在 文本 框 输入 一 个 算 
术 表 达 式 ,如 2*5 十 4, 然 后 单 击 * 计 算 ” 按 钮 ,将 触发 onclick 事件 处 理 器 调用 函数 cl,cl 
将 表达 式 的 值 14 在 文本 框 显示 其 结果 。 

2) 独立 函数 eval( 表 达 式 ) 

在 3-13. htm 中 使 用 了 独立 函数 eval( 表 达 式 ) . 它 的 功能 是 计算 表达 式 , 返 回 表 达 式 
的 值 。 


3.7 JavaScript 应 用 实例 


3.7.1 创建 保存 JavaScript 的 脚本 代码 的 JS 文件 


1. JS 文件 的 作用 


能 否 将 JavaScript 的 脚本 代码 与 HTML 代码 分 开 存放 在 不 同 的 文件 中 呢 ? 这 样 可 
以 将 创建 页 面 动 态 功能 的 任务 与 创建 页 面 格式 的 任务 分 别 保存 在 不 同 的 文件 中 。 
可 以 ,JavaScript 的 脚本 代码 可 以 单独 存放 在 一 个 以 .js 作为 后 缀 名 的 文本 格式 文件 


Mei %2 。 


中 。 在 HTML 文档 中 通过 指定 .js 文件 的 存放 路 径 , 可 以 将 .js 文件 中 编写 的 JavaScript 
的 脚本 代码 载 和 到 HTML 文档 中 。 


2. 创建 JS 文件 


例 3. 14 一 个 只 包含 JavaScript 脚本 程序 代码 的 JS 文本 文件 ,脚本 程序 的 任务 是 对 
输入 的 口令 进行 验证 ,文件 名 为 3-14.js。 


Var a,passwort; 
a= "1234"7 
passwort=prompt ("请 你 输入 口令 !",""); 
if (passwort==a) location.href="3- 15.htm"; 
else 了 
alert ("对 不 起 ,你 输入 的 口令 不 对 !"); 
location.href="3- 16.htm"; 
} 


保存 文件 时 注意 选择 “保存 类 型 ”为 “JScript 文件 ”。 其 文件 后 级 名 会 自动 取 为 . js。 
如 果 使 用 其 他 网 页 编辑 器 ,要 注意 保存 文件 为 文本 文件 格式 ,并 选取 后 级 名 为 . js。 

3. 创建 载 入 JS 文件 的 HTML 文档 

例 3.15 包含 3-14.js 文件 的 HTML 文档 (3-14. htm)。 


<html> 

<head> 

<script src="3-14.js" language= "JavaScript" type= "text/javascript"> 
</script> 

< /head> 

< /html> 


4. 显示 欢迎 的 HTML 文件 
例 3.16 显示 欢迎 文字 的 静态 页 面 文档 (3-15. htm)。 


<html> 
欢迎 你 进入 我 的 网 站 ! 
< /html> 


5. 显示 再 见 的 HTML 文件 


例 3.17 显示 再 见 文字 的 静态 页 面 文档 (3-16. htm)。 


<html> 
再 见 ! 
</html> 


在 浏览 器 打开 3-14. htm 网 页 , 先 看 到 如 图 3. 16 所 示 的 对 话 框 。 如 果 在 对 话 框 中 输 
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入 的 口令 正确 (1234) ,可 打开 3-15. htm 欢迎 页 面 ,如 图 3. 17 所 示 。 否 则 会 在 提示 对 话 框 
中 显示 “对 不 起 ,你 输入 的 口令 不 对 !1”, 将 打开 再 见 页 面 。 


图 3.16 输入 对 话 框 


€ CALPSHAO\pshaov D3-15.htm - ... | 


= | 和 克 csLpsHAopshat v | 寻 | x || Google 
文件 四” 编辑 中” 吾 看 ”收藏 天 入 ”工具 中 ”帮助 (中 
窗 - 喧 -| 称 catpsHhaoypshao\ 书 - 从 ~ 园 - 咒 ~ 


欢迎 你 进入 我 的 网 站 ! 


一 计算 机 | 保护 模式 : 禁用 时 100% ~ 


图 3.17 网 页 3-14. htm 在 口令 正确 时 打开 的 页 面 


6. 知识 点 归纳 


1) .js 文件 

JavaScript 代码 可 以 单独 存放 在 一 个 文件 内 ,并 以 .js 作为 文本 文件 的 后 组 名 。 注 
意 .js 文件 里 不 能 有 一 script 盖 一 /script 二 或 其 他 注释 语句 。 

2) 在 HTML 文档 调用 JS 文件 的 方式 

在 html 文件 中 如 果 要 使 用 .js 文件 ,要 在 script 标记 码 中 使 用 src 属性 指定 .js 文件 
的 存放 路 径 。 

参见 下 面 的 代码 : 


< script src="* .js" language= "JavaScript" type= "text/javascript">< /script> 


3.7.2 在 状态 栏 显示 滚动 的 文字 
在 网 上 的 页 面 中 你 见 到 过 在 状态 栏 里 滚动 显示 的 文字 吗 ? 它们 是 如 何 实现 的 呢 ? 
1. 创建 具有 动态 功能 的 JS 文件 
例 3.18 创建 包含 在 状态 栏 上 显示 滚动 文字 函数 的 JS 文件 (3-17. js) 。 


var tl= "我 是 滚动 的 文字 ,怎么 样 ? 很 漂亮 吧 ! 你 也 试 试 吧 。"; 
var lentxt=t1.length; var width= 100; var pos=1-width; 
function gd() { 


| 


post++; Var scroller=""; 

if (pos== lentxt) {pos=1- width;} 

if (pos<0) { 
for (var i=1; i<=Math.abs (pos); i++) {scroller=scrollert+"";} 
scroller= scroller+t1.substring (0,wiqdth— i+1); 

} 

else {scroller= scroller+t1.substring (pos,width+ pos);} 

window.status= scroller; 

setTimeout ("gd ()",100); 

} 


2. 创建 包含 JS 文件 的 HTML 文件 
例 3.19 创建 包含 3-17.js 文件 的 htm 文件 (3-18. htm)。 


<html> 

< script src="3-17.js" language= "JavaScript" type= "text/javascript"> 
</script> 

<body onLoad= "gd ();"> 

注意 ! 一 会 儿 , 你 会 看 到 在 状态 栏 里 出 现 滚动 的 文字 

< /body> 

< /html> 


在 浏览 器 打开 3-18. htm 网 页 ,可 以 看 到 如 图 3. 18 所 示 页 面 。 


IC OO 
全 |e cpsreovpsoreva [1 [x | coooe > 


5 文人 D“ 编 缉 G) “下 看 QI “收藏 克 工具 〇 “帮助 (H) 
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注意 ! 一 会 儿 ， 你 会 看 到 在 状态 栏 里 出 现 滚动 的 文字 


是 滚动 的 文字 , 怎 于 计算 机 | 保护 模式 : 禁用 下 100% ~ 


图 3.18 网 页 3-18. htm 的 运行 结果 


3. 知识 点 归纳 


1) setTimeout(…) 定 时 器 

在 页 面 状态 栏 中 可 以 看 到 滚动 的 文字 ,是 因为 使 用 了 setTimeout (…) 定 时 器 ， 
setTimeout 方法 指定 时 间 100 毫秒 后 ,调用 gd() 函数 scroller 变量 向 前 移动 一 步 。 

2) 具有 多 个 知识 点 的 JS 文件 

3-17.js 文件 有 点 复杂 ,综合 使 用 了 函数 、if-else 选择 结构 .for 循环 结构 等 知识 点 ,一 
下 子 不 容易 看 明白 。 可 以 先 模仿 使 用 ,只 要 把 “我 是 滚动 的 文字 ,怎么 样 ? 很 漂亮 吧 ! 你 
也 试 试 吧 。,” 换 成 你 想 显 示 的 文字 即 可 。 然 后 . 慢 慢 理解 程序 的 编写 方法 。 
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3-18. htm 页 面 中 状态 栏 里 的 文字 会 一 直 滚动 ,如 果 不 想 让 它 滚动 下 去 ,该 如 何 做 呢 ? 
请 读者 思考 如 何 解 决 这 个 问题 。 


3.7.3 在 页 面 上 滚动 显示 的 菜单 
1. 创建 JS 文件 
例 3.20 创建 在 页 面 上 具有 滚动 菜单 功能 的 .js 文件 (3-19. js) 。 


var index=7 
link= new Array (6) ; text=new Array (6); 
link[0]="'3-1.htm'; link[1] ="'3-2.htm';link[2]= '3- 3.htm';link[3]= '3- 4.htm'; 
link[4]= "3- 5.htm'; link[5]='3- 6.htm';link[6]="'3-7.htm'; 
text[0]= ' 新 闻 1'; text[1]= ' 新 闻 2'; 
text[2]= ' 菜 单一 '; text[3]= ' 菜 单 二 '; 
text[4]= ' 菜 单 三 '7 text[5]=' 菜 单 四 '; text[6]=' 菜 单 五 '; 
document .write ("<marquee scrollamount= '1' scrolldelay= '100' direction= 'up' width= '150" 
height= "150'>"); 
for (i=0; i<index; i++){ 
document .write ("gnbsp; <img src= 'img/1.gif" width= '12' height= '12'><a href="+1ink 
[i]+" target="' blank'>"); 
document .write (text[i]+"</a><br>"); 
} 


document .write ("< /marquee> ") 


2. 创建 包含 JS 文件 的 HTML 文件 
例 3.21 创建 包含 3-19.js 文件 的 . htm 文件 (3-20. htm)。 


<html> 
<script src= "3- 19.js" language= "JavaScript" type= "text/javascript"> 
</script> 
<body> 
注意 ! 一 会 儿 , 在 页 面 上 能 看 到 滚动 的 菜单 。 
< /body> 
< /html> 


在 浏览 器 打开 3-20. htm 网 页 ,可 以 看 到 如 图 3. 19 所 示 页 面 。 
3. 知识 点 归纳 


1) marquee( 滚 动 ) 标 记 码 

菜单 之 所 以 能 滚动 ,是 因为 使 用 了 marquee 滚动 标记 码 , 能 向 上 滚动 是 在 direction 
(方向 ) 属 性 中 取 值 为 up。 

2) document. write 方法 的 作用 

一 般 使 用 document. write 方法 在 页 面 上 动态 显示 文本 内 容 , 在 write 方法 参数 中 可 


N26 。 
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注意 ! 一 会 儿 ， 在 页 面 上 能 看 到 滚动 的 菜单 。 
完成 | 于 计算 机 | 保护 模式 :禁用 胞 100% 了 


图 3.19 网 页 3-20. htm 的 运行 结果 


以 租 入 HTML 标记 码 , 这 样 可 以 在 页 面 上 显示 不 同 格式 的 文本 内 容 。 


3.8 思考 与 练习 


3.8.1 思考 题 


3-1 JavaScript 有 什么 特点 ? 

3-2 ”如何 将 JavaScript 脚本 代码 能 入 到 HTML 文档 ? 
3-3 JavaScript 有 哪些 常见 对 象 ? 

3-4 如 何 定义 JavaScript 变量 ? 变量 与 常量 有 什么 区 别 ? 
3-5 如 何 创 建 JavaScript 自 定 义 函 数 ? 

3-6 JavaScript 有 哪些 类 型 的 表达 式 ? 

3-7 ” JavaScript 有 哪些 类 型 的 事件 ? 如 何 触发 事件 过 程 ? 


3.8.2 上 机 练习 


3-1 编写 一 个 可 以 随意 确定 N 的 数值 并 显示 出 1 十 2 十 … 十 N 的 和 的 页 面 

3-2 ”编写 一 个 可 以 根据 输入 不 同 购物 款 数额 ,如 500 元 以 下 .500 一 1000 元 、1000 一 
2000 元 ,分 别 显示 给 不 同 优 惠 券 的 页 面 

3-3 ”编写 一 个 包含 计算 圆 面积 函数 Y1. 并 可 随意 输入 半径 并 显示 圆 面 积 值 的 页 面 
文件 。 

3-4 ”编写 一 个 包含 计算 立方 函数 Y2, 使 用 文本 框 输入 数值 ,通过 单 击 “确定 ”按钮 调 
用 Y1 并 显示 该 数值 立方 值 的 页 面 文件 。 

3-5 ”编写 一 个 动态 网 页 ,实现 在 不 同时 间 显 示 不 同 的 问候 .不同 图 片 的 功能 。 

3-6 ”编写 一 个 页 面 文件 : 包含 名 称 为 “计算 ”按钮 , 当 鼠 标 移 到 “计算 ”按钮 上 在 状态 
栏 显 示 “ 计 算 ” 功 能 的 说 明文 字 , 鼠 标 离 开 “ 计 算 ” 按 钮 清除 状态 栏 文字 的 功能 。 

3-7 ”编写 一 个 带 有 滚动 菜单 的 动态 网 页 。 
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层 合 样式 表 一 一 CSS 


CSS 是 Cascading Style Sheets( 层 至 样式 表 ) 的 缩写 ,通常 简称 为 样式 表 。 顾 名 思 义 ， 
它 是 一 种 设计 样式 的 技术 。 

在 制作 页 面 时 采用 CSS 技术 ,可 以 有 效 地 设置 页 面 的 布局 .字体 .颜色 .背景 和 其 他 
效果 ,对 页 面 实 现 更 加 精确 的 控制 。 描 述 样式 表 的 CSS 代码 可 以 府 和 人 在 HTML 文档 中 ， 
通过 浏览 器 解释 执行 ,CSS 语句 的 格式 与 HTML 语句 格式 基本 相同 ,非常 容易 使 用 。 

本 章 主要 解决 以 下 问题 : 

。 在 HTML 文档 中 如 何 使 用 CSS 样式 ; 

。 如 何 通过 CSS 属性 设置 页 面 布局 ; 

。 如 何 通过 CSS 定位 属性 指定 页 面 元 素 在 页 面 中 显示 的 位 置 与 层次 ; 

。 如 何 通过 CSS 滤 镜 属性 使 元 素 对 象 显 示 特 殊 效 果 ; 

。 如 何 编 写 与 使 用 单独 保存 的 CSS 文件 。 


4.1 CSS 的 基本 功能 


本 节 简 单 说 明 CSS 的 基本 功能 。 
使 用 CSS 技术 ,只 要 对 相应 的 代码 做 一 些 简单 的 修改 ,就 可 以 改变 同一 页 面 的 不 同 
部 分 ,或 不 同 页 面 的 网 页 外 观 和 格式 ,使 网 页 变 得 多 彩 多 姿 。 
CSS 具有 如 下 的 基本 功能 : 
”在 几乎 所 有 的 浏览 器 上 都 可 以 使 用 。 
。 一 些 通过 图 片 实现 的 功能 ,可 用 CSS 实现 ,从 而 使 页 面 可 以 更 快 地 下 载 。 
”利用 CSS 属性 可 以 设置 字体 、 颜 色 、 背 景 等 页 面 格 式 ,可 使 页 面 的 字体 变 得 更 漂 
亮 , 更 容易 编排 。 
。 利用 CSS 定位 可 以 使 页 面 布 局 更 加 规范 .美观 ,轻松 地 控制 页 面 的 布局 。 
”可 以 统一 多 个 网 页 的 风格 ,使 网 页 格式 同时 更 新 。 可 以 将 站 点 上 所 有 的 网 页 风格 
都 使 用 一 个 CSS 文件 进行 控制 ,只 要 修改 这 个 CSS 文件 ,那么 整个 站 点 的 所 有 页 
面 都 会 随 之 发 生变 动 。 
”利用 CSS 滤 镜 属性 可 以 使 页 面 产 生 多 媒体 效果 。 
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4.2 在 HTML 文档 中 使 用 CSS 样式 的 方法 


本 节 主 要 解决 如 何在 HTML 文档 中 使 用 CSS 样式 的 问题 ,将 给 出 4 种 不 同 的 解决 方案 。 


4.2.1 通过 标记 码 定义 CSS 样式 
如 同 在 HTMEL 文档 中 使 用 JavaScript 语言 一 样 , 可 以 通过 样式 标记 码 二 style 二 在 
HTML 文档 中 引入 CSS 代码 定义 页 面 的 样式 。 


1. 在 HTML 文档 中 引入 CSS 代码 
例 4.1 通过 样式 标记 码 二 style 之 引入 CSS 代码 ,在 CSS 代码 中 定义 超 链接 和 文字 
背景 颜色 的 方式 的 HTML 文档 (4-1. htmy) 。 


<html> 
<head> 
<style> 
a {color:red} 
p {background- color:blue; color:white} 
</style> 
< /head> 


<body> 
<a href= "http://www.nease.net "> 动态 网 页 制作 < /a> 


<p> 你 注意 到 这 一 段 文字 的 颜色 和 背景 颜色 了 吗 ?< /p> 怎么 样 ? 
< /body> 
</html> 


在 浏览 器 打开 4-1. htm 网 页 ,可 以 看 到 如 图 4.1 所 示 页 面 。 
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动态 网 页 制作 | 


到 计算 机 | 保护 模式 : 禁用 夸 100% ~ 


图 4.1 网 页 4-1. htm 的 显示 结果 


2. 知识 点 归纳 


1) 在 HTML 文档 中 引入 CSS 代码 的 标记 码 
在 HHTML 文档 中 引入 CSS 代码 要 使 用 二 style 二 二 /style 记 标记 码 。 包 含 CSS 代码 
. 79 


的 过 style 之 二 /style 之 标记 码 对 一 般 包 含 在 一 head 一 标记 码 内 。 
2) 通过 标记 码 统 一 定义 样式 
通过 标记 码 统 一 定义 CSS 样式 的 语法 格式 : 
标记 码 {属性 名 :属性 值 ; 属性 名 :属性 值 ; …} 


其 中 ,标记 码 为 HTML 的 标记 码 , 如 p、body、a 等 。“ 属 性 名 ”指定 哪 种 属性 ,如 color 
为 颜色 属性 .“ 属 性 值 ? 用 来 设置 属性 的 具体 样式 ,如 文本 的 颜色 (color) 属 性 的 具体 样式 
为 红色 (red) 。 这 种 定义 样式 的 方式 称 为 统一 定义 样式 方式 。 

CSS 代码 是 由 标记 码 、 属 性 、 属 性 值 3 部 分 组 成 的 ,它们 通常 用 来 定义 HTML 文档 
中 显示 元 素 的 样式 ,使 得 标记 码 标识 的 元 素 可 以 按 CSS 代码 定义 的 样式 在 页 面 中 显示 。 

可 见 ,CSS 代码 是 对 HTML 标记 码 的 一 个 补充 ,可 灵活 定义 标记 码 标识 的 元 素 的 显 
示 样 式 。 

3) 对 多 个 标记 码 同 时 定义 相同 的 样式 

如 果 和 希望 多 个 标记 码 标识 的 元 素 具有 相同 的 样式 ,可 参考 下 面 的 语句 ,例如 : 


hl, body, a {color:red} 
这 行 CSS 代码 能 让 所 有 的 hl、bodya 标记 码 对 中 标识 的 文本 元 素颜 色 都 为 红色 。 
4.2.2 通过 标记 码 的 style 属性 定义 CSS 样式 


可 以 通过 其 他 方式 插入 CSS 代码 吗 ? 有 ,可 以 直接 在 标记 码 中 通过 其 style 属性 插 
入 指定 该 标记 码 样式 的 CSS 代码 。 


1. 通过 标记 码 的 style 属性 定义 CSS 样式 的 方式 


例 4.2 通过 标记 码 的 style 属性 定义 CSS 样式 的 HTML 文档 : 利用 二 body> 标 
记 码 的 style 属性 定义 CSS 样式 ,确定 文本 的 字体 大 小 .字体 样式 和 文字 颜色 的 方式 
(4-2. htm) 。 


<html> 
<body style= "font- size:72;font- style:bold;color:red"> 你 好 < /p> 
< /body> 

< /html> 


在 浏览 器 打开 4-2. htm 网 页 ,可 以 看 到 如 图 4.2 所 示 页 面 。 

2. 知识 点 归纳 

1) 直接 定义 方式 

通过 HTML 标记 码 的 style 属性 可 以 嵌入 CSS 代码 定义 样式 ,这 种 方式 称 为 直接 定 
义 样式 方式 。 在 某 个 范围 或 单个 标记 中 定义 某 种 样式 时 可 以 使 用 这 种 方式 。 

2) 直接 定义 样式 的 语法 格式 

通过 标记 码 的 style 属性 散人 入 CSS 定义 代码 的 语法 格式 : 
mso ， 


臣 CNLPSHAOVpshac\ 书 起 \ 同 二 车 在 医 开 生 订 HTMLM4-2. ENIEES 
GO | 忽 cALPsHAO\pshat ~ Google 


图 4.2 网 页 4-2. htm 的 显示 结果 


< 标记 码 style= "属性 名 :属性 值 ; 属 性 名 :属性 值 ;属性 名 :属性 值 ;…" >…< /标记 码 > 


CSS 代码 由 style==“ 属 性 :属性 值 ” 组 成 ,用 来 定义 指定 标记 码 的 样式 。 

在 例 4. 2 中 ,font-size、font-style 和 color 为 确定 的 属性 名 ,分 别 指定 的 是 字体 大 小 
(size) .字体 样式 (style) 和 文字 颜色 (color) 属 性 ;而 72、bold、red 为 具体 样式 的 属性 值 。 
CSS 样式 代码 的 含义 是 以 72pt、 粗 体 、 红 色 的 样式 显示 标记 码 标 识 的 文本 文字 。 


4.2.3 通过 标记 码 的 Class 属性 定义 CSS 样式 


通过 “统一 定义 ”方式 可 以 对 HTML 同一 类 型 的 标记 码 或 多 种 类 型 的 标记 码 定 义 同 
一 种 CSS 样式 。 通 过 “直接 定义 ”方式 可 以 对 HTML 单个 标记 码 定义 一 种 CSS 样式 。 

如 果 和 希望 对 同一 类 型 的 部 分 标记 码 设 置 相同 的 样式 ,部 分 标记 码 设置 男 外 的 样式 该 
如 何 定义 呢 ? 可 先 定义 相关 类 Class, 然 后 通过 HTML 标记 码 的 Class 属性 解决 这 个 
问题 。 


1. 同一 类 型 的 标记 码 以 不 同样 式 显示 


例 4.3 在 页 面 中 通过 相关 类 及 class 属性 为 H2 标记 码 设置 不 同 颜 色 样 式 的 文档 
(4-3. htm) 。 


<html> 
<head> 
<style> 
h2.sl{color:red} 
h2.s2{color:blue} 
</style> 
</head> 
<h2> 没 有 改变 的 h2< /h2> 
<h2 class= sl> 改 变 为 红色 的 h2< /h2> 
<h2 class= s2> 改 变 为 黄色 的 h2< /h2> 
<h2 class= sl> 第 一 章 < /h2> 
<h2 class= s2> 第 二 章 < /h2> 


-Say 


< /html> 


在 浏览 器 打开 4-3. htm 网 页 ,可 以 看 到 如 图 4. 3 所 示 页 面 。 


愿 cNUpsHAOVpshaos -3 htm - Wi- 百 
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;i 文件 四 ”编辑 上 ”下 看 (W) 收藏 失 ( 和 ”工具 中 ”帮助 叶 ) | 
窗 窑 | 知 caLpsHAopshao\ 书 - ;从 -~ ~ 最 ~ 


没有 改变 的 h2 
| 改变 为 红色 的 h2 
改变 为 黄色 的 h2 
第 一 章 
第 二 章 
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图 4.3 网 页 4-3. htm 的 显示 结果 


2. 不 同类 型 的 标记 码 以 相同 样式 显示 


例 4.4 在 页 面 中 通过 独立 类 及 class 属性 设置 某 些 H2、P 标识 的 文本 颜色 为 蓝 色 
的 文档 (4-4. htm) 。 


<html> 
<head> 
<style> 
.SsS2{color:blue} 
</style> 
< /head> 
<p class=s2> 这 是 蓝 色 的 p< /p> 
<h2 class= s2> 这 是 蓝 色 的 h2< /h2> 
<h2> 这 是 黑色 的 h2< /h2> 
< /html> 


在 浏览 器 打开 4-4. htm 网 页 ,可 以 看 到 如 图 4. 4 所 示 页 面 。 

3. 知识 点 归纳 

CSS 提供 了 相关 类 与 独立 类 来 解决 多 个 标记 码 设置 相同 样式 与 相同 标记 码 设置 不 
同样 式 的 问题 。 

1) 通过 相关 类 定义 样式 

通过 相关 类 定义 样式 中 包含 两 部 分 内 容 : HTML 标记 码 与 自 定义 类 名 、 属 性 名 与 属 
性 值 。 通 过 相关 类 定义 的 样式 可 以 分 别 用 在 相同 标记 码 中 ,其 语法 格式 如 下 : 
Jsz 


| 这 是 蓝 色 的 p 
这 是 蓝 色 的 h2 
这 是 黑色 的 h2 


四 也 计算 机 | 保护 模式 : 禁用 时 100% ~ 


图 4.4 网 页 4-4. htm 的 显示 结果 


标记 码 .类 名 {属性 名 :属性 值 } 

2) 通过 独立 类 定义 样式 

通过 独立 类 定义 样式 中 包含 两 部 分 内 容 : 自 定义 类 名 、 属 性 名 与 属性 值 。 通 过 独立 
类 定义 的 样式 ,可 用 在 HTML 的 多 个 不 同 的 标记 码 上 ,其 语法 格式 如 下 : 

.类 名 { 属 性 名 :属性 值 } 

独立 类 样式 能 更 加 自如 地 对 标记 码 定 义 CSS 样式 。 

3) 通过 Class 属性 选择 CSS 样式 

使 用 标记 码 的 Class 属性 选择 样式 分 为 两 个 步骤 : 首先 要 通过 过 style 二 标记 码 引 和 人 
CSS 代码 定义 相关 类 或 独立 类 定义 的 CSS 样式 ;然后 在 HTML 文档 中 通过 指定 标记 码 
的 Class 属性 选择 类 名 ,根据 类 名 选择 定义 好 的 样式 。 


4.2.4 通过 标记 码 的 ID 属性 定义 CSS 样式 


通过 ID 属性 定义 CSS 样式 与 通过 class 属性 定义 CSS 样式 功能 相同 基本 ,区 别 在 于 
它 需 要 先 定义 称 为 ID 名 的 CSS 样式 ,然后 通过 标记 码 的 ID 属性 选择 ID 名 使 用 CSS 
样式 。 


1. 不 同类 型 的 标记 码 以 相同 样式 显示 
例 4.5 在 页 面 中 为 H3、P 标记 码 设置 ID 属性 、. 显 示 不 同 颜色 样式 的 文档 (4-5. htm) 。 


<html> 

<head> 

<style> 
#s1 {font- style:bold; color:red;} 
#5s2 {font— style:bold; color:blue;} 

</style> 

<P ID= "sl"> 这 是 红色 的 P< /P> 

<H3 ID= "sl"> 这 是 红色 的 H3< /H3> 


。 B82nM 


<H3 ID="s2"> 这 是 蓝 色 的 H3< /H3> 
</head> 
</htm> 


在 浏览 器 打开 4-5. htm 网 页 ,可 以 看 到 如 图 4.5 所 示 页 面 。 
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图 4.5 网 页 4-5.htm 的 显示 结果 


2. 知识 点 归纳 
通过 ID 名 定义 CSS 样式 的 语法 格式 : 
#IDname {属性 名 :属性 值 } 


既然 通过 ID 属性 与 class 属性 定义 CSS 样式 的 功能 基本 相同 ,何必 要 设计 两 种 方式 
呢 ? 其 实 , 通 过 ID 属性 定义 CSS 样式 有 特别 的 功能 ,后 面 的 内 容 会 介绍 。 


4.3 ”使 用 CSS 属性 设置 页 面 布 局 


从 上 面 介 绍 的 CSS 语法 格式 可 以 看 出 ,属性 是 CSS 非常 重要 的 部 分 。 熟 练 掌握 CSS 
的 各 种 属性 ,可 以 得 心 应 手 地 编辑 页 面 布局 。 


本 节 的 内 容 主 要 解决 如 何 通过 CSS 的 属性 设置 或 修改 HTML 文档 中 的 字体 、 字 间 
距 , 行 间距 、 颜 色 、 背 景 、 边 距 、 填 充 距 \ 位 置 、 可 视 性 和 空间 位 置 等 页 面 元 素 的 布局 问题 。 
4.3.1 网 页 中 使 用 的 单位 


CSS 样式 表 的 另 一 个 优势 在 于 它 可 以 精确 地 定义 和 控制 元 素 的 外 观 。 通 过 CSS 样 
式 可 以 设 定 显示 元 素 在 窗口 页 面 中 的 宽 、 高 、 左 右边 距 以 及 字体 大 小 等 。 

要 确定 元 素 在 页 面 中 的 大 小 、 位 置 .需要 先 了 解 网 页 文件 中 使 用 的 单位 。 网 页 文件 中 
使 用 的 单位 一 般 分 为 相对 单位 和 绝对 单位 两 种 。 

1. 绝对 单位 


网 页 上 使 用 的 绝对 单位 有 厘米 (cm) .毫米 (mm) 、 英 寸 (in)、 点 (pt) 派克 (pc)。 绝 对 
| “。 


单位 通常 不 能 适应 各 种 浏览 器 多 样 性 的 变化 :因此 应 用 的 比较 少 。 


2. 相对 单位 


网 页 上 常用 的 单位 是 相对 单位 ,相对 单位 是 指 元 素 尺寸 相对 于 浏览 器 系统 默认 值 相 
对 的 缩放 。 包 括 像 素 (px)、em 和 ex。px 是 相对 浏览 者 计算 机 屏幕 分 辨 率 来 显示 的 ， 
Windows 用 户 一 般 使 用 96 像素 /英寸 的 分 辨 率 。em 是 相对 于 当前 对 象 中 文本 M 的 字 
体 尺寸 大 小 ,如 果 没 有 设置 当前 对 象 文本 的 字体 尺寸 , 则 使 用 浏览 器 默认 文本 M 的 字体 
尺寸 。ex 是 相对 于 当前 对 象 中 文本 x 的 字体 尺寸 大 小 。 


4.3.2 字体 属性 
如 何 使 用 CSS 代码 设置 页 面 中 显示 文本 的 字体 属性 呢 ? 


1. 设置 字体 属性 的 方式 
例 4.6 设置 不 同 字 体 属性 的 文档 (4-6. htm)。 


<html> 
<head> 
<style> 
#s1 {font- style:italic;font- variant:small- caps;font- weight :bold;font- size:28pt;font 
-family: 黑 体 } 
# s2 {font:italic small- caps bold 28pt 黑体 } 
</style> 
< /head> 
<p ID= "sl"> 字 体 属性 的 使 用 abcaBc< /p> 
<p ID= "s2"> 字 体 属性 的 使 用 < /p> 
< /html> 


在 浏览 器 打开 4-6. htm 网 页 ,可 以 看 到 如 图 4.6 所 示 页 面 。 
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图 4.6 网 页 4-6. htm 的 显示 结果 
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2. 知识 点 归纳 


(1) 通过 font 可 以 设置 字体 的 各 种 属性 。 

(2) 设置 font 的 属性 的 简化 方式 。 

设置 font 的 属性 可 以 使 用 完整 方式 , 即 说 明 “ 属 性 :属性 值 ”, 还 可 以 使 用 简化 方式 ， 
只 是 说 明 font 的 属性 值 。 例 如 : 


{font:italic small- caps bold 28pt 黑体 } 


但 要 注意 属性 值 的 排放 顺序 。 其 顺序 为 font-style、font-variant、font-weight、 font- 
size\font-family, 其 中 没有 定义 的 属性 值 系 统 会 以 默认 值 显 示 。 
(3) 表 4.1 是 CSS 关于 字体 的 基本 属性 ,在 编辑 页 面 时 经 常会 用 到 。 


表 4.1 字体 属性 
属 性 属性 含义 属 性 值 
font-family 使 用 什么 字体 所 有 的 字体 
font-style 字体 是 否 斜体 Normal \italic ,oblique 
font-variant 字体 是 否 用 小 体 大 写 Normal small-caps 
font-weight 定义 字体 的 粗细 Normal .bold bolder \lithter 等 
font-size 定义 字体 的 大 小 Absolute-size ,relative-size ,length ,percentage 等 


其 中 ,small-caps 为 小 体 大 写字 体 , 意 为 小 字体 大 写字 母 。 
4.3.3 颜色 与 背景 属性 

1. 通过 CSS 代码 定义 文字 的 颜色 与 背景 属性 

例 4.7 为 页 面 文字 设置 颜色 与 图 像 背景 的 网 页 文件 (4-7. htm) 。 


<html><head> 

<style> 

p{color: red; background- image: url (3. GIF); background- repeat: no- repeat; background— 
position:top center} 


</style>< /head> 
<P style= "font:bold"> 文 字 的 前 景色 .背景 图 片 背景 图 片 的 位 置 < /p> 
< /html> 


在 浏览 器 打开 4-7. htm 网 页 ,可 以 看 到 如 图 4.7 所 示 的 页 面 。 
2. 知识 点 归纳 
(1) 通过 CSS 的 颜色 属性 color 可 以 设置 对 象 的 前 景色 ,通过 CSS 的 背景 属性 


background 可 以 设置 对 象 的 背景 颜色 .背景 图 片 。 
(2) CSS 的 颜色 和 背景 属性 如 表 4. 2 所 示 。 
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文字 的 前 景色 、 轩 加 其 天 时 和 图 片 的 位 置 


陵 计算 机 | 保护 模式 : 禁用 


用 100% ~ 


图 4.7 网 页 4-7.htm 的 显示 结果 
表 4.2 CSS 的 颜色 和 背景 属性 
属 is 属性 含义 属性 书写 格式 属 性 值 
Color 定义 前 景色 例 地 颜色 
{color:red} 
Background-color 定义 背景 色 全 ad 颜色 
{background-color: yellow} 
Background-image 定义 背景 图 案 body 4 图 片 路 径 
{background-image: url(. jpg)} 
和 背景 图 案 重 复方 式 例 : body repeat-x,repeat-y、 
{background-repeat: repeat-y} norepeat 
Background- 了 例 : body 二 
attachment 设置 深 动 {background-attachment: scroll} Seroll Bixeq 


Background-position 


背景 图 案 的 初始 
位 置 


4.3.4 文本 的 排版 属性 
如 何 使 用 CSS 代码 对 页 面 中 的 文本 进行 排版 呢 ? 


1. 任务 与 步骤 


例 : body 
{background:url(. jpg)top center} 


例 4.8 在 网 页 文件 中 显示 文本 文字 的 文档 (4-8. htmy) 。 


<html> 


<body> 网 海 茫茫 ,怎样 使 自己 的 网 页 成 为 一 道 亮 丽 的 风景 线 让 人 过 目 不 忘 ? 


Percentage length、 
top、 left、 right、 
bottom 等 


怎样 使 自己 的 网 页 的 风格 独树一帜 ?怎样 免除 众多 HTML 标志 属性 设置 的 烦恼 ? 
Css---- 层 释 样 式 单 可 以 助 你 一 辟 之 力 ! 


< /body> 
</html> 


在 浏览 器 打开 4-8. htm 网 页 ,可 以 看 到 如 图 4. 8 所 示 的 页 面 。 
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网 海 茫茫 ， 怎 样 使 自己 的 网 页 成 为 一 道 亮 丽 的 风景 线 让 人 过 
目 不 忘 ? 怎样 使 自己 的 网 页 的 风格 独特 一 致 ? 怎样 免除 众多 
人 和 性 设置 的 烦恼 9 CSS- 一 层 鸽 样式 单 可 以 助 你 一 臂 

之 


一 计算 机 | 保护 模式 : 禁用 县 100% ~ 


图 4.8 排版 前 网 页 4-8. htm 的 显示 结果 


例 4.9 修改 4-8. htm 文件 代码 ,添加 CSS 文本 属性 代码 对 文本 文字 进行 排版 的 文 
档 (4-9. htmy) 。 


<html> 

<head> 

<title> 文 本 属性 < /title> < /head><body> 

<p style= "letter- spacing:lem;text- align:justify;text- indent:4em;line— 
height:17pt"> 

网 海藻 茫 ,怎样 使 自己 的 网 页 成 为 一 道 亮丽 的 风景 线 让 人 过 目 不 忘 ? 

怎样 使 自己 的 网 页 的 风格 独特 一 致 ? 

怎样 免除 众多 HTML 标志 属性 设置 的 烦恼 ?css 一 层 释 样式 单 可 以 助 你 一 臂 之 力 !< /p> 
< /body> 

< /htm1l> 


在 浏览 器 打开 4-9. htm 网 页 ,可 以 看 到 如 图 4. 9 所 示 的 页 面 效果 。 


感 文本 尾 性 - Windows Internet 


籁 cxNLpSHADNIpshaov 醒 ~| 好 |X 川 coooe A- 
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- 益 - 奖 -| 辐 [ 重 cE| 息 文 .x[ 一 | 从 一 园 - 一 各 下 oO 
网 海 茫茫 ， 怎 样 使 自己 的 网 页 成 月 
为 道 亮丽 的 风景 线 让 人 人 过目 不 忘 ? 
怎样 使 自己 的 网 页 的 风格 独特 一 致 ? 
怎样 免除 众多 HTHL 标 志 属 性 设置 的 
烦恼 ?css 一 一 层 生 样式 单 可 以 助 
你 一 营 之 力 ! 
完成 于 计生 机 | 全 PE 要 用 鸭 100% 


图 4.9 排版 后 网 页 4-9. htm 的 显示 结果 


2. 知识 点 归纳 


(1) 排版 属性 。 从 图 4. 9 可 以 看 到 经 过 排版 属性 处 理 的 文本 ,其 中 使 用 了 字 间 距 \ 行 
间距 、 文 本 对 齐 、 首 行文 字 缩 进 方式 等 属性 。 在 HTML 文件 中 使 用 排版 属性 的 方式 参考 
umss . 


如 下 代码 : 


<P style= "letter- spacing:Jemztext- align:justify; text- indent:4em; line- height:17pt"> 
“< /p> 
其 中 , 字 间 距 属性 letter-spacing 定义 字 间 距 为 lem; 文 本 对 齐 属 性 text-align 定义 为 
两 端 对 齐 方 式 ; 首 行文 本 缩 进 属性 text-indent 定义 缩 进 4em; 行 高 属性 line-height 定义 
行 高 为 17pt。 
(2) CSS 对 文本 进行 排版 的 主要 属性 如 表 4. 3 所 示 。 
表 4.3 对 文本 进行 排版 的 主要 属性 


属 性 属性 含义 属 性 值 
Word-spacing 定义 各 个 单词 之 间 的 间距 Normal 一 length 二 (必须 以 长 度 为 单位 ) 
Letter-spacing 定义 每 个 字母 之 间 的 间距 Normal 一 length 一 (必须 以 长 度 为 单位 ) 


None | underline | overline | line-through 


Text-decoration 定义 文字 的 “装饰 ”样式 


|blink 
a 本 Baseline| sub| s - iddl 
a 定义 元 素 在 重 直 方向 上 的 位 置 seline| sub| super | top | text-top | middle| 
bottom | text-bottom| =percentage> 
Text-transform 使 文本 转换 为 其 他 形式 Capitalize| uppercase| lowercase| none 
Text-align 定义 文字 的 对 方 方 式 Left|right|center|justify 
Text-indent 定义 文本 的 首 行 的 缩 进 方式 <length> |<=percentage> 
Po i N 1| 一 ber>|=length> 
Line-height 定义 文本 的 行 高 | 
percentage> 


从 表 4. 3 中 可 以 看 到 CSS 可 以 定义 文本 的 字 间 距 、 字 母 间 距 、 装 饰 方式 、 对 齐 方 式 、 
缩 进 方式 和 行 高 等 属 


4.3.5 超 链接 属性 


网 页 默认 的 超 链接 文字 显示 方式 是 : 未 访问 过 的 超 链接 是 蓝 色 文字 带 蓝 色 下 划 线 ; 
访问 过 的 超 链接 是 深 紫色 文字 带 深 紫色 下 划 线 。 

如 果 所 有 的 网 页 都 是 这 种 样式 会 很 单调 ,能 和 否 改变 超 链接 文字 的 颜色 呢 ? 可 以 ,利用 
CSS 文本 属性 中 的 Text-decoration 属性 可 以 修改 超 链 接 文本 的 属性 。 


1. 重新 定义 超 链接 文本 的 属性 


例 4.10 编写 HTML 文档 : 通过 CSS 的 超 链接 文本 属性 text-decoration 实现 , 没 
有 访问 过 的 超 链接 是 绿色 文字 无 下 划 线 ;访问 过 的 超 链接 是 红色 文字 无 下 划 线 。 另 外 , 当 
鼠标 指定 超 链接 时 , 超 链接 文字 变 为 蓝 色 并 添加 上 划 线 (4-10. htmy) 。 

<html> 


<head> 
<style> 


。 89me") 


a:link{color:green;text— decoration:none} 
a:visited{color:red;text— decoration:none} 
a:hover{color:blue;text— decoration:overline;font- size:26pt} 
p:{font- family: 行 书 体 ;font- size:18pt} 

</style> 

</head> 

<body> 

<p><a href= "http://www.263.net"> 未 访问 的 链接 < /a>< /p> 

<p><a href= "http://www.163.net"> 访 问 过 的 链接 < /a> < /p> 

<p><a href= "http://www.sina.com"> 鼠标 激活 的 链接 < /a> < /p> 

< /body> 

< /html> 


在 浏览 器 中 打开 4-10. htm 网 页 ,可 以 看 到 如 图 4. 10 所 示 的 页 面 效果 。 


未 访问 的 链接 
访问 过 的 链接 


鼠标 激活 的 链接 


hapywwws 责 天 计算 机 | 保护 模式: 将 用 


图 4.10 网 页 4-10. htm 的 显示 效果 


2. 知识 点 归纳 
从 本 例 中 可 以 看 出 ,CSS 样式 可 以 拒 套 使 用 ,一 起 对 对 象 元 素 起 作用 。 
4.3.6 边 距 属性 


CSS 可 以 定义 margin 边 距 属性 。 通 过 给 标记 码 指定 margin 属性 可 定义 标识 的 对 象 
与 其 他 对 象 的 边 距 。 


1. 定义 边 距 属性 


例 4.11 定义 标记 码 二 p 过 的 margin 边 距 属性 , 设 竹 其 上 、 右 、 下 、 左 的 边 距 分 别 为 
lem、2em、3em、4em 的 文档 (4-11. htm)。 


<html> 
<headq> 
< style> 


p{margin:1lem 2em 3em 4em} 


Im90 。 


</style> 

</head> 

<body> 

网 海 茫 茫 ,怎样 使 自己 的 网 页 成 为 一 道 亮 丽 的 风景 线 让 人 过 目 不 忘 ? 
怎样 使 自己 的 网 页 的 风格 独树一帜 ? 


<p> 
怎样 免除 众多 HTML 标 志 属 性 设置 的 烦恼 ? 
</p> 
css--- 层 秋 样 式 单 可 以 助 你 一 辟 之 力 ! 
< /body> 
< /html> 


在 浏览 器 中 打开 4-11. htm 网 页 ,可 以 看 到 如 图 4. 11 所 示 的 页 面 效 果 。 可 以 看 到 具 


有 margin 属性 的 文本 对 象 与 其 他 文本 、 窗 口 边 框 的 边 距 分 别 为 lem、2em、3em 和 4em。 


[gs CANLPSHAOMIpshao\ 书 稿 \ 网 站 编程 技术 \ 程 序 JHTMLY-. .| 
| 大 catpshaovpshat ~ 
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容 - 史 -|99|-| 乱 cA | 入 c- x jm 


网 海 薄 茫 ， 怎 样 使 自己 的 网 页 成 为 一 道 亮 丽 的 风景 线 门 
让 人 过 目 不 忘 ? 怎样 使 自己 的 网 页 的 风格 独树一帜 ? 


怎样 免除 众多 HTIL 标 志 属 性 设置 的 烦 
恼 ? 


CSS--- 层 亚 样 式 单 可 以 助 你 一 名 之 力 ! -| 
| 陋 计算 机 | 保护 模式 : 禁用 瑟 100% ~ 


图 4.11 网 页 4-11. htm 的 显示 效果 


2. 知识 点 归纳 
(1) margin 具有 四 种 边 距 属性 ,如 表 4.4 所 示 。 


表 4.4 边 距 属性 
属 性 属性 含义 属 性 值 
Margin-top 设置 顶端 边 距 Length| percentage| auto 
Margin-right 设置 右 侧 边 距 Length| percentage| auto 
Margin-bottom 设置 底 端 边 距 Length| percentage|auto 
Margin-left 设置 左 侧 边 距 Length| percentage|auto 


(2) 具有 margin 属性 的 对 象 ,无 论 怎么 改变 窗口 的 大 小 ,都 会 按照 定义 好 的 边 距 样 


式 在 页 面 中 显示 。 


| 


(3) 简化 定义 margin 属性 时 可 以 使 用 完整 方式 , 即 * 属 性 : 属性 值 ”, 也 可 以 采用 简化 
定义 方式 , 即 “margin: 属性 值 列 ”, 属 性 值 按照 上 、 右 、 下 、 左 顺序 依次 排列 。 例 如 : 


body{margin:1lem 2em 3em 4em} 


上 面 这 段 代 码 的 含义 是 body 的 上 、 右 \ 下 左边 距 为 lem、2em、3em、4em。 
如 果 “ 属 性 值 列 ” 里 有 缺失 的 属性 值 , 仍 然 按 照 上 、 右 、 下 左边 距 顺序 对 应 选取 。 例 如 
body{margin: lem 2em) 为 上 右边 距 为 lem、2em。 


4.3.7 ”边框 的 填充 距 属性 
1. 填充 距 与 边 距 的 区 别 


边框 为 线条 构成 的 矩形 框 。 填 充 距 指 的 是 边框 与 框 中 对 象 之 间 的 距离 。 
边 距 指 的 是 具有 margin 属性 的 对 象 与 页 面 中 其 他 对 象 ( 例 如 文本 、 图 像 、 窗 口 边框 ) 
之 间 的 距离 。 


2. 设置 边框 与 填充 距 属性 


例 4.12 通过 CSS 的 padding 属性 设置 边框 与 框 中 文本 对 象 之 间 的 左 、 右 、 上 、 下 填 
充 距 分 别 为 lem、2em、3em、6em 的 文档 (4-12. htm)。 


<html> 

<head> 

<style> 

p{border:2px ridge #FF0000; 

padding- left:6em; padding- right:2em; padding- top:lem; padding- bottom:3em} 
</style> 

< /head> 

<body> 

网 海 茫茫 ,怎样 使 自己 的 网 页 成 为 一 道 亮丽 的 风景 线 让 人 过 目 不 忘 ? 
怎样 使 自己 的 网 页 的 风格 独树一帜 ? 

<p> 怎 样 免除 众多 HIML 标志 属性 设置 的 烦恼 ? 

Css--- 层 全 样式 单 可 以 助 你 一 辟 之 力 ! 

</p> 

< /body> 

</htm> 


在 浏览 器 中 打开 4-12. htm 网 页 ,可 以 看 到 如 图 4. 12 所 示 的 页 面 效 果 。 
3. 知识 点 归纳 


1) padding 填充 距 属 性 
padding 填充 距 属 性 如 表 4.5 所 示 。 


lmez 。 
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网 海 茫茫 ， 怎 样 使 自己 的 网 页 成 为 
忘 ? 怎样 使 自己 的 网 页 的 风格 独 树 一 


怎样 免除 众多 HL 标志 属性 设置 的 烦恼 
css 一 层 闪 样式 单 可 以 助 你 一 区 之 力 ! 


= 的 风景 线 让 人 过 目 不 


加 画 计算 机 | 保护 模式 : 禁用 瑟 100% ~ 
图 4.12 网 页 4-12. htm 的 显示 效果 
表 4.5 填充 距 属性 
属 性 属性 含义 属 性 值 
Padding-top 设置 顶端 填充 距 Length| percentage 
Padding-right 设置 右 侧 填充 距 Length| percentage 
Padding-bottom 设置 底 端 填 充 距 Length| percentage 
Padding-left 设置 左 侧 填充 距 Length| percentage 


2) border 边框 属性 


通过 CSS 的 border 属性 可 以 设置 边框 的 宽度 、 样 式 和 颜色 。 


表 4.6 所 示 。 


border 边框 属性 如 


表 4.6 边框 属性 

属 性 属性 含义 属 性 值 
Border-top-width 设置 顶端 边框 宽度 Thin| medium | thick |length 
Border-right-width 设置 右 侧 边框 宽度 Thin| medium|thick|length 
Border-bottom-width 设置 底 端 边框 宽度 Thin| medium | thick | length 
Border-left-width 设置 左 侧 边 框 宽度 Thin| medium | thick | length 
Border-width 一 次 定义 边框 宽度 Thin| medium | thick | length 
Border-color 设置 边框 颜色 Color 
Border svi 讽 和 过 和 re ene 
Border-top 一 次 定义 顶端 的 各 种 属性 Border-top-width| border-style| color 
Border-right 一 次 定义 右 侧 的 各 种 属性 Border-top-width| border-style| color 
Border-bottom 一 次 定义 底 端 的 各 种 属性 Border-top-width| border-style| color 
Border-left 一 次 定义 左 侧 的 各 种 属性 Border-top-width| border-style| color 
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边框 属性 种 类 繁多 ,读者 可 以 通过 练习 来 了 解 不 同属 性 的 样式 类 型 。 
4.3.8 图 文 混 排 属性 


在 页 面 中 插入 图 片 很 难 控制 图 片 对 象 与 文本 对 象 之 间 的 距离 ,使 用 表格 分 别 安排 文 
字 与 图 片 对 象 是 一 种 解决 方案 ,但 表格 会 影响 页 面 的 下 载 速度 。 使 用 CSS 的 边 距 属性 、 
float 等 属性 可 以 轻松 解决 页 面 中 图 文 之 间 的 距离 问题 。 


1. 图 文 混 排 的 效果 
例 4.13 通过 CSS 的 多 个 不 同属 性 实现 图 文 混 排 效果 的 文档 (4-13. htmy) 。 


<html> 

<head> 

<style> 

img {margin- right:lem; margin- bottom:lem; float:left; width:100; height:80} 
body{text- align:left; text- indent:2em; line- height:20pt} 

</style> 

< /head> 

<body> 

<p><img border="0" src=" 鸡 .gif" width="120" height="90"> 网 海 茫 茫 ,怎样 使 自己 的 网 页 成 
为 一 道 亮 丽 的 风景 线 让 人 过 目 不 忘 ? 

怎样 使 自己 的 网 页 的 风格 独树一帜 ? 

怎样 免除 众多 HTML 标志 属性 设置 的 烦恼 ? 

Css--- 层 释 样 式 单 可 以 助 你 一 臂 之 力 !< /p> 

< /body> 

</html> 


在 浏览 器 中 打开 4-13. htm 网 页 ,可 以 看 到 如 图 4. 13 所 示 的 页 面 效 果 。 
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图 4.13 网 页 4-13. htm 的 显示 效果 


Jo4 。 


2. 知识 点 归纳 


1) 高 度 、 宽 度 ,float 属性 
4-13. htm 中 使 用 了 CSS 高 度 .宽度 ,float 等 属性 ,如 表 4.7 所 示 。 
表 4.7 CSS 的 其 他 属性 


属 性 属性 含义 属 性 值 
Width 定义 宽度 属性 Length| percentage|auto 
Height 定义 高 度 属 性 Length|auto 
Float 使 文字 环绕 在 一 个 元 素 的 四 周 Left|right| none 
Clear 定义 某 一 边 是 否 有 环绕 文字 Left|right| none| both 


其 中 ,通过 宽 、 高 属性 可 以 定义 指定 元 素 的 大 小 ,如 果 不 指定 元 素 的 大 小 其 可 以 随 着 
窗口 的 改变 自动 改变 其 大 小 。float 属性 可 以 实现 文字 环绕 图 片 的 混 排 效 果 。 

2) 使 用 CSS 样式 设置 图 文 混 排 效果 的 优势 

从 4-13. htm 中 可 以 看 出 不 用 表格 也 能 实现 图 文 混 排 的 效果 ,与 使 用 表格 相 比 减少 了 
大 量 的 代码 ,更 可 加 快 下 载 速度 。 使 用 CSS 样式 设置 图 文 混 排 效果 会 使 图 文 布局 更 合 
理 , 页 面 更 漂亮 。 


4.3.9 位 置 属性 与 可 视 性 属性 


如 何 确定 显示 对 象 在 页 面 中 的 具体 位 置 呢 ? 可 使 用 CSS 的 position 位 置 属性 解决 
这 个 问题 。 


1. 相对 位 置 、 绝 对 位 置 与 静态 位 置 


在 使 用 CSS 位 置 属性 之 前 , 先 要 了 解 position 位 置 属性 的 三 个 基本 概念 ,相对 位 置 、 
绝对 位 置 与 固定 位 置 。 

相对 位 置 是 指 对 象 元 素 的 位 置 是 相对 于 未 定义 情况 下 它 应 在 位 置 的 偏 移 位置 , 偏 移 
量 为 相对 定义 中 的 数值 。 

绝对 位 置 是 指 对 象 元 素 与 其 所 在 容器 块 中 保持 的 位 置 。 通 常情 况 下 元 素 的 容器 块 为 
页 面 边 界 , 即 相对 页 面 边 界 的 固体 位 置 。 

静态 位 置 是 指 对 象 元 素 在 窗 体 页 面 上 的 位 置 是 不 可 修改 的 ,对 于 那些 没有 被 指定 位 
置 属性 的 元 素 , 它 是 默认 值 。 


2. 可 视 性 


通过 visibility 属性 可 以 定义 在 页 面 上 显示 的 元 素 对 象 是 否 可 以 可 见 ,visibility 属性 
只 有 两 个 值 hidden( 隐 藏 ) 与 visible( 可 见 ) 。 
”8 从 


3. 使 用 位 置 属性 与 可 视 性 属性 


例 4.14 通过 CSS 的 位 置 属性 确定 图 片 在 页 面 中 的 绝对 位 置 , 并 可 根据 用 户 的 选择 
在 同一 位 置 显示 不 同 图 片 的 文档 (4-14. htmy) 。 


<html> 
<head> 
<style type= "text/css"> 
#cl{position:absolute; top:100; left:30} 
#c2{position:absolute; top:100; left:30; visibility:hidden;} 
p{color:# 0000FF; font- weight:bold} 
</style> 
< /head> 
单 击 按钮 会 显示 不 同 的 图 片 
< form name= "myform"> 
< input type= "button" value= "鲜花" onclick="cl.style.visibility= 'visible'; c2.style. 
visibility= 'hidden'"> 
< input type= "button" value=" 小 鸡 " onclick="c2.style.visibility= 'visible'; cl.style. 
visibility= 'hidden'"> 
< /form> 
<div id="cl"><img src=" 花 .gif" width= "120" height="90"><p> 鲜 花 图 像 < /div> 
<div id="c2"><img src=" 鸡 .gif" width= "120" height="90"><p> 小 鸡 图 像 < /div> 
</html> 


在 浏览 器 中 打开 4-14. htm 网 页 ,可 以 看 到 如 图 4. 14 所 示 的 页 面 效 果 。 单 击 不 同 的 
按钮 可 以 在 同一 位 置 显示 不 同 的 图 片 。 


看 c\LPSHAO\Ipshao\ 书 稿 \ 网 站 编程 技术 \ 程 序 \HTML\4-14..… S 
OO- 医 cALPsHAO\Ipshat -|#| XxX Google 
文件 日” 编辑 (E) ”各 看 (WD 收藏 夹 ”工具 帮助 (中 
窑 - 宅 -|B9|-| 乔 cx | 和 @cA= ;从 ~- 国 - 册 ->” 
单 击 按钮 会 显示 不 同 的 图 片 
EE 

鲜花 图 像 

潮 计算 机 | 保护 模式 : 禁用 四 100% Ma 


图 4.14 网 页 4-14. htm 的 页 面 效 果 
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4. 知识 点 归纳 
1) 常用 的 定位 属性 


位 置 属性 是 用 来 定位 的 ,用 来 定位 的 属性 还 有 其 他 属性 如 表 4. 8 所 示 。 


表 4.8 定位 属性 

属 性 属性 含义 属 性 值 
Position 定义 位 置 Absolute| relative| static 
Left top 指定 横向 、 纵 向 坐标 位 置 Length| percentagel auto 
Width height 指定 占用 空间 的 大 小 Length| percentage| auto 
Clip 剪 切 Shapelauto 
Overflow 内 容 超出 时 的 处 理 方法 Visible|hidden | scrolll auto 
z-index 产生 立体 效果 Autol|integer 
Visibility 定义 可 见 性 Inherit| visible| hidden 


2) 可 视 行 属性 及 ID 类 型 样式 的 特殊 性 
从 4-14. htm 可 以 看 到 通过 ID 名 可 以 定义 其 样式 的 属性 ,例如 下 面 的 语句 : 


cl.style.visibility= 'hidden'; (隐藏 ) 


onclick= "c2.style.visibility= 'visible'" (可 视 ) 


通过 ID 名 可 以 直接 设置 其 样式 的 属性 ,修改 属性 的 值 。 这 就 是 使 用 ID 名 来 定义 


CSS 样式 的 一 个 用 途 。 


4.3.10 ”空间 位 置 属性 


通过 CSS 位 置 属性 可 以 确定 元 素 在 页 面 中 的 位 置 。 但 在 相同 的 位 置 怎样 显示 多 个 
对 象 呢 ? 如 何 确 定 它们 的 层 琶 次 序 呢 ? 通过 z-index 属性 可 以 解决 这 个 问题 。 


1. 使 用 z-index 属性 


例 4.15 利用 zindex 属性 实现 两 幅 图 片 和 一 段 文 字 在 相同 页 面 位 置 . 不 同 空间 位 
置 ( 不 同 层 次 ) 显 示 ,文字 对 象 覆 盖 在 W2 图 片 对 象 上 ，… 铃 ”图片 对 象 覆 盖 在 文字 对 象 上 的 


文档 (4-15. htmy) 。 


<html> 
<head> 


<title> 空 间 位 置 效果 < /title> 
<style type= "text/css"> 


-pl{position:absolute; left:1lin; top:0in; width:3in; height:2in} 


-Pp2{position:absolute; left:2.4in; top:0.2in} 


。 Quwlp 


</style> 
</head> 
<body> 
< img src="img/w2.jpg" class= "pl" id= "image" style= "z- index:1"> 
<div class= "pl" id= "textl" style= "color:# ffff33; z-index:2" > 
这 段 文字 会 覆盖 在 图 片上 。 因 为 文字 和 w2 图 片 属于 同一 类 pl, 因 此 具有 相同 的 位 置 设置 。 
W2 图片 index 值 为 1 位 于 最 底层 ; 铃 图 片 的 z- index 值 为 3 位 于 最 上 层 
</div> 
<img src="img/ 铃 .gif" class="p2" id="image" style="z- index:3"> 
< /body> 
</htm> 


在 浏览 器 中 打开 4-15. htm 网 页 ,可 以 看 到 如 图 4. 15 所 示 的 页 面 效 果 。 
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图 4.15 网 页 4-15. htm 的 页 面 效 果 


2. 知识 点 归纳 


1) z-index 属性 
z-index 属性 通过 其 属性 值 确定 对 象 在 页 面 上 又 放 的 层次 位 置 , 值 越 小 位 于 的 层次 


越 低 。 
利用 CSS 的 定位 属性 ,可 以 确定 对 象 在 页 面 上 的 平面 位 置 与 空间 位 置 , 会 使 页 面 更 
加 精致 ,更 加 富有 动感 。 


2) 通过 网 页 编辑 工具 设置 CSS 样式 

学 习 CSS 的 属性 可 以 借助 网 页 编辑 工具 .大 多 数 的 网 页 编辑 工具 都 支持 CSS, 可 以 
自动 编写 CSS 代码 。 例 如 ,打开 FrontPage 2003, 打 开 网 页 文件 ,在 网 页 “设计 ”视图 下 ， 
单 击 主 窗口 “格式 ”一 “样式 ”菜单 项 ,可 打开 “样式 ”对 话 框 ,如 图 4. 16 所 示 , 在 对 话 框 中 可 
以 选中 已 有 的 样式 进行 修改 ,也 可 以 新 建 样 式 , 进 行 设置 后 FrontPage 2003 会 自动 编写 
相应 的 CSS 代码 。 
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position; absolute; left; 0.Sin; top: 0.2in; width; 3in; 


5 末日 抓 分 口 代码 Q 预 | 


0:32856Kbps 824 x 392 默认 自 定义 


图 4.16 使 用 工具 创建 与 修改 CSS 样式 


4.4 使 用 CSS 滤 镜 属性 使 对 象 显示 特殊 效果 


CSS 最 精彩 的 内 容 是 滤 镜 ,通过 滤 镜 属性 filter 可 以 对 对 象 进行 滤 镜 处 理 ,使 对 象 产 
生 特 殊 的 显示 效果 。 

本 节 的 内 容 主要 解决 如 何 通过 CSS 滤 镜 属性 filter 的 子 属性 对 对 象 进行 滤 镜 效 果 处 
理 的 问题 。 


4.4.1 透明 效果 


透明 度 不 同 ,图像 会 显示 不 同 的 效果 ,如何 使 图 像 显示 不 同 的 透明 度 呢 ? 可 使 用 滤 镜 
属性 filter 的 alpha 子 属 性 解决 这 个 问题 。 


1. 使 用 alpha 透明 度 属性 
例 4.16 通过 alpha 属性 设置 图 像 不 同 透 明 效 果 的 文档 (4-16. htm) 。 


<html> 
<head> 
<title>alpha 透明 属性 < /title> 
<style> 
#imgl{filter:alpha (opacity= 40)} 
# img2 {filter: alpha (opacity= 0, finishopacity= 100, style= 1, startX= 0, startY= 85, 
finishx=150,finishY= 85)} 
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# img3 {filter: alpha (opacity= 0, finishopacity= 100, style= 2, startX= 0, startY= 85, 
finishx=150,finishY= 85)} 
# img4 {filter: alpha (opacity= 0, finishopacity= 100, style= 3, startX= 0, startY= 85, 
finishx=150,finishY= 85)} 
</style> 
</head> 
<body> 
< img src="img/w2.jpg" width= "120" height="90" > 
< img ID= "imgl" src="img/w2.jpg" width= "120" height= "90"> 
< img ID= "img2" src= "img/w2.jpg" width= "120" height= "90"> 
< img ID= "img3" src="img/w2.jpg" width= "120" height= "90"> 
<img ID="img4" src="img/w2.jpg" width= "120" height= "90"> 
</body> 
< /html> 


在 浏览 器 打开 4-16. htm 网 页 ,可 以 看 到 如 图 4. 17 所 示 的 页 面 效果 。 其 中 , 左 一 为 原 
始 图 像 , 左 二 为 透明 度 为 40 的 图 像 , 左 三 透明 度 为 线形 渐变 的 图 像 , 左 四 透明 度 为 放射 形 
渐变 的 图 像 , 左 五 透明 度 为 长 方形 渐变 的 图 像 。 
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图 4.17 网 页 4-16. htm 的 页 面 效果 


2. 知识 点 归纳 


1) alpha 透明 子 属 性 的 语法 格式 
要 了 解 alpha 是 如 何 设 置 透 明度 的 , 先 来 看 一 下 使 用 滤 镜 属性 filter 的 alpha 子 属性 
设置 透明 度 的 语法 格式 : 


filter: alpha (opacity= nr finishopacity= m, style= s, startX= x0, startY= Y0, finishX= xl1, 


finishY= x2) 


2) alpha 透明 子 属性 的 参数 

。 opacity 参数 代表 透明 度 等 级 ,参数 值 从 0 到 100,0 代表 完全 透明 ,100 代表 完全 
不 透明 。 

。 finishopacity 参数 是 可 选项 ,用 来 设置 结束 时 的 透明 度 , 从 而 达到 一 种 渐变 效果 ， 
参数 值 从 0 到 100。 


lmaoo 。 


。 style 参数 指定 透明 区 域 的 形状 特征 。0 统一 形状 ,1 线形 ,2 放射 状 ,3 长 方形 。 
。 startX 和 startY 代表 渐变 透明 效果 的 开始 坐标 ,finishX 和 finishY 代表 渐变 透明 


效果 的 结束 坐标 。 
如 果 不 设置 透明 度 的 渐变 效果 ,只 需 设 置 opacity 参数 即 可 。 


4.4.2 模糊 效果 与 投影 效果 


滤 镜 属性 filter 的 blur 子 属性 可 以 使 文本 对 象 产生 模糊 效果 , 滤 镜 的 dropshadow 属 


性 可 以 使 文本 对 象 产生 投影 效果 。 看 下 面 的 例子 。 


1. 使 用 blur 与 dropshadow 子 属 性 


例 4.17 通过 设置 blur 与 dropshadow 属性 使 文本 对 象 产 生 模糊 与 投影 效果 的 文档 


《4-17. htiny 


<html> 
<head> 
<style> 


#fl{position:absolute; top:10;width:300; filter:blur (add= true,direction= 136, strength= 


30)} 


#f2{position: absolute; top:10; left:3in; width: 300; filter: dropshadow (color= #f£ffccff, 


offx= 16, offy= 10,positive=0)} 


</style> 
< /head> 
<div id=f1 style= "font- family: 宋 体 ; font- size:66; font-weight:bold; color:#cc00cc;"> 
你 好 < /div> 
<div id=f2 style= "font- family: 宋 体 ; font- size:66; font-weight:bold; color:#cc00cc;"> 
你 好 < /div> 
< /htm1> 
在 浏览 器 中 打开 4-17. htm, 可 以 看 到 如 图 4. 18 所 示 的 页 面 效果 。 
所 CALPSHAO\Ipshao\ $3 稿 \ 网 站 编程 技术 \4-17.htm - Windows Internet Explorer 3 
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图 4.18 网 页 4-17. htm 的 页 面 效果 
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2. 知识 点 归纳 


1) dropshadow 属性 的 语法 格式 
filter:blur (add=1,direction=d,strength= int) 


blur 子 属 性 能 使 元 素 产 生 一 种 模糊 效果 ,blur 具有 3 个 参数 。add 参数 有 两 个 值 : 
True 和 False。 分 别 指定 元 素 (图 像 文字) 是 否 被 设置 成 模糊 效果 ;direction 参数 用 来 设 
置 模糊 的 方向 ,0 度 代 表 垂 直 向 上 ,以 45 度 为 一 个 单位 ,例子 中 的 135 代表 底部 向 右 135 
度 ,每 一 个 度数 单位 都 代表 一 个 模糊 方向 ;strength 代表 有 多 少 像素 的 宽度 将 受到 模糊 影 
响 ,参数 值 是 用 整数 来 设置 的 。 

2) dropshadow 属性 的 语法 格式 


filter:dropshadow (color= color, offx= offx, offy=offy, positive=positive) 


Dropshadow 子 属 性 能 使 元 素 产生 一 种 投影 效果 ,Dropshadow 具有 4 个 参数 ,color 
代表 投射 投影 的 颜色 。offx 和 offy 分 别 为 x 方向 和 y 方向 投影 的 偏 移 量 , 偏 移 量 必须 用 
整数 值 来 设置 ,如 果 设 置 为 正 整数 ,代表 x 轴 的 右 方向 和 y 轴 的 向 下 方向 。 设 置 为 负 整 数 
则 相反 。positive 参数 有 两 个 值 ,true 或 1 用 非 透明 像素 建立 可 见 的 投影 ,false 或 0 用 透 
明 的 像素 建立 可 见 的 投影 。 

3) 注意 问题 

dropshadow 属性 对 图 片 的 支持 不 好 ,因为 JPEG、GIF 格式 的 图 像 文件 经 过 了 减 色 和 
压缩 处 理 , 颜 色 很 丰富 .很 难 找到 一 个 投射 投影 的 位 置 。 


4.4.3 发光 效 果 


滤 镜 属性 filter 的 glow 子 属性 可 以 使 对 象 的 边缘 产生 发 光 效 果 , 怎 样 对 文本 对 象 或 
图 片 对 象 应 用 glow 属性 呢 ? 


1. 使 用 glow 发 光 属 性 
例 4.18 使 用 glow 属性 使 文本 对 象 与 图 片 对 象 产生 发 光 效 果 的 文档 (4-18. htm)。 


<html> 

<head> 

<style> 

#f{position:absolute; left:6; top:9; width:300; filter:glow (color= red, strength= 26)} 
//* 定义 主 样 式 , 采 用 绝对 位 置 ,Glow 子 属性 ,发 光 颜 色 值 为 #FF3399, 强 度 为 26* // 
</style> 

</head> 

<body> 

<div id=f style= "width:688; height:270"> 

<p style= "font- family: 宋 体 ; font- size:66pt; font- weight:bold; color:# 003366"> 
你 好 ! 


< img border= "0" src= "img/ 铃 .gif" width= "32" height= "48"> < /p> 


Ian2 * 


</div> 
< /body> 
</html> 


在 浏览 器 中 打开 4-18. htm 网 页 ,可 以 看 到 如 图 4. 19 所 示 的 页 面 效 果 。 
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图 4.19 网 页 4-18. htm 的 页 面 效 果 


2. 知识 点 归纳 

1) glow 发 光 属 性 的 语法 格式 

Filter:glow (color= color, strength= strength) 

glow 属性 参数 color 用 来 确定 发 光 的 颜色 ,strength 用 来 确定 发 光 的 强度 ,参数 值 从 
1 到 266。 

2) 注意 问题 

glow 发 光 属 性 对 图 像 对 象 、 文 本 对 象 都 可 以 使 用 。 通 过 修改 color 参数 值 ,可 以 显示 
不 同 颜色 的 发 光 效 果 。 


4.4.4 波纹 效果 


滤 镜 属性 filter 的 wave 子 属 性 可 以 将 对 象 元 素 的 显示 样式 按照 垂直 的 波纹 样式 打 
乱 ,wave 属性 能 使 文本 对 象 或 图 片 对 象 产生 什么 样 的 波纹 效果 呢 ? 


1. 应 用 wave 波纹 属性 
例 4.19 设置 wave 属性 使 文本 对 象 与 图 片 对 象 产生 波纹 效果 的 文档 (4-19. htm) 。 


<head> 

<style> 

#wl{position:absolute; top:10; width:300; filter:wave (add= true, freq= 3, lightstrength= 
100,phase= 66, strength= 20)} 

//* 设置 w1 样 式 , 绝 对 位 置 ,wave 属性 产生 3 个 波纹 , 光 强 为 100, 波 纹 从 162 度 (360* 66s ) 开 始 ， 

振幅 为 20* // 
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< Vstyle> 

< /head> 

<body> 

<div id=w]l style= "width:369; height:173; z-index:2;"> 

<p style= "font- family:lucida handwriting; font- size= 72pt; font- weight:bold; color:rgb 
(189,1,66);"> 

Winter< /p> 

</div> 

<img idq=wl src="img/wl.jpg" style= "width:369; height:173; z-index:1;" > 
< /body> 

< /html> 


在 浏览 器 打开 4-19. htm 网 页 ,可 以 看 到 如 图 4. 20 所 示 的 页 面 效 果 。 
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图 4.20 网 页 4-19. htm 的 页 面 效果 


2. 知识 点 归纳 
1) wave 属性 的 语法 格式 


filter:wave (add=true (false) ,freq= 频 率 ,1lightstrength= 增 强 光 效 ,phase= 偏 移 量 ， strength= 
强度 ) 
2) wave 属性 的 5 个 参数 
。 add 参数 用 来 定义 是 否 产生 波纹 ,其 有 两 个 参数 值 ,true 表示 生产 波纹 样式 ,false 
不 产生 。 
。 freq 参数 用 来 定义 生成 波纹 的 频率 ,是 指 在 对 象 上 共产 生 多 少 个 完整 的 波纹 。 
。 lightstrength 参数 用 来 使 生成 的 波纹 增强 光 的 效果 ,参数 值 可 以 为 0 一 100。 
。 phase 参数 用 来 设置 正弦 波 开始 的 偏 移 量 ,默认 值 为 0, 范围 为 0 一 100, 值 表示 波 
纹 开始 时 偏 移 量 占 波长 的 百分比 ,例如 该 值 为 26. 代 表 正 弦 波 从 90 度 (360 * 
26%) 的 方向 开始 偏 移 。 
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。 Strength 指 振幅 强度 。 
4.4.5 滤 镜 的 其 他 属性 

1. chroma 透明 色 属 性 

滤 镜 属性 filter 的 chroma 子 属性 可 以 将 一 个 对 象 的 颜色 设置 为 透明 色 , 它 的 语法 格 
式 如 下 : 


filter:chroma (color= color) 


chroma 透明 色 属 性 只 有 一 个 参数 color。 例 如 ,用 下 面 的 代码 可 以 把 div 范围 内 的 绿 
色 设 置 为 透明 色 。 


div{position:absolute; top:70; width:200; filter:chroma (Color=green) } 

2. flipH flipV 水 平 与 垂直 翻转 属性 

滤 镜 属性 filter 的 flip 子 属 性 可 以 设置 对 象 的 翻转 样式 ,flipH 代表 水 平 翻转 ,flipV 
代表 垂直 翻转 。 它 们 的 语法 格式 为 : 


filter:flipH 
filter:flipV 


例如 ,用 下 面 的 代码 可 以 把 div 范围 内 的 对 象 水 平 翻 转 。 


div{position:absolute; top:20; width:300; filter:flipH} 

3.invert 翻转 属性 

滤 镜 属性 filter 的 invert 子 属性 可 以 把 对 象 的 可 视 化 属性 全 部 翻转 ,包括 色彩 、 饱 和 
度 和 亮度 值 。 它 的 语法 格式 如 下 。 

filter:invert 

Invert 翻转 属性 实际 上 是 一 种 “底片 ”的 效果 ,读者 可 以 尝试 一 下 。 

4. mask 遮 照 属性 

滤 镜 属性 filter 的 mask 遮 照 子 属性 可 以 为 对 象 建立 一 个 覆盖 于 表面 的 膜 。 它 的 语 
法 格式 如 下 。 

Filter:mask(color= 颜 色 ) 


mask 遮 照 属性 只 有 一 个 color 参数 ,用 来 指定 使 用 什么 颜色 作为 掩 膜 。 对象 加 上 
mask 遮 照 属 性 后 的 效果 就 好 像 用 有 色 眼 镜 看 到 的 对 象 一 样 。 例 如 ,用 下 面 的 代码 可 以 指 
定 在 div 范围 内 用 什么 颜色 遮 住 对象 。 


div{position:absolute; top:20; left:60; filter:mask (color:# 666699)} 
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使 用 mask 遮 照 属性 , 遮 音 下 的 字体 颜色 就 失去 了 意义 。 
5. shadow 投影 属性 


滤 镜 属性 filter 的 shadow 投影 属性 可 以 在 指定 的 方向 建立 对 象 的 投影 。 它 的 语法 
格式 如 下 。 

filter:shadow (color= color,direction=direction) 

shadow 有 两 个 参数 值 .color 参数 用 来 指定 投影 的 颜色 。direction 参数 用 来 指定 投 
影 的 方向 。 这 里 说 的 方向 与 blur 属性 中 提 到 的 “方向 与 角度 的 关系 ”是 一 样 的 。 

Dropshadow 子 属 性 与 shadow 子 属性 有 什么 不 同 呢 ?shadow 属性 可 以 在 任意 角度 
进行 投影 ,dropshadow 属性 实际 上 是 用 偏 移 来 定义 投影 的 。 

6. xray 射线 属性 


滤 镜 属性 filter 的 Xray 子 属性 可 以 产生 X 射线 。Xray 属性 产生 的 效果 使 对 象 看 上 
去 有 一 种 X 光 片 的 感觉 。 其 语法 格式 如 下 。 

filter:Xray 

如 果 给 对 象 设置 了 Xray 射线 属性 就 像 给 它 拍 了 一 张 X 光 片 一 样 ,读者 可 以 尝试 
= 
从 本 节 介 绍 的 内 容 可 以 发 现 ,filter 滤 镜 属性 的 语法 格式 有 些 特殊 , 它 具 有 多 个 子 属 
性 , 子 属 性 又 具有 多 个 参数 ,filter 滤 镜 属性 的 语法 格式 可 以 归纳 为 : 

filter: 子 属性 名 ( 子 属性 参数 : 子 属性 值 ; 子 属性 参数 : 子 属性 值 ; …; 子 属 性 参数 : 子 属性 值 ;) 


要 进行 滤 镜 处 理 必须 使 用 filter 属性 ,由 子 属性 确定 具体 的 滤 镜 处 理 方式 , 子 属性 名 
后 括号 内 的 子 属 性 参数 值 确定 滤 镜 的 显示 效果 。Filter 的 常用 子 属性 如 表 4. 9 所 示 。 


表 4.9 filter 的 常用 子 属性 及 含义 


属性 名 称 属性 解释 属性 名 称 属性 解释 
Alpha 设置 透明 度 Grayscale 设置 灰 度 (降低 图 片 的 彩色 度 ) 
Blur 设置 模糊 效果 Invert 设置 底片 效果 
Chroma 设置 指定 颜色 透明 Light 设置 灯光 投影 
Dropshadow | 设置 投射 阴影 Mask 设置 透明 膜 
Fliph 水 平 翻 转 Shadow 设置 阴影 效果 
Flipv 垂直 翻转 Wave 利用 正弦 波纹 打 乱 图 片 
Glow 为 对 象 的 外 边界 增加 光 效 Xray 只 显示 轮廓 
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4.5 CSS 应 用 实例 


本 节 的 内 容 主 要 解决 CSS 综合 应 用 的 问题 。 
4.5.1 解释 菜单 
1. 创建 JS 文件 


例 4.20 ”编写 定义 根据 不 同 菜单 显示 不 同文 字 使 用 的 变量 、 函 数 和 判别 方式 的 
JavaScript 脚本 文件 ,保存 文件 为 “解释 菜单 .js”。 
解释 菜单 .js 文件 的 代码 如 下 : 


msg=new Array (5) 
msg[0]="<b> 这 是 本 章 第 一 个 文件 4-1.htm!< /b>" 
msg[1]="<b> 这 是 本 章 第 二 个 文件 4-2.htm!< /b>" 
msg[2]="<b> 这 是 本 章 第 三 个 文件 4- 3.htm!< /b>" 
msg[3]= "<b> 首 都 在 线 , 内 容 很 全 面 !< /b>" 
msg[4]="<b> 新 浪 网 ,去 看 看 吧 !< /b>" 
Var browser; 
if (document.all) { 
layerRef= 'document .all.' 
styleRef='.style.' 
changeMessages=".innerHTMI=msg [num]" 
closeit="" 
browser=true} 
else 
{alert ("此 效果 在 Netscape 浏览 器 中 不 能 实现 !") ;} 
function mover (num) { 
if (browser){ 
eval (layerRef+ 'startingMsg'+ changeMessages); 
eval (layerRef+ 'startingMsg'+ closeit);} 
} 
function mout (num) { 
if (browser){ 
eval (layerRef+ 'startingMsg'+ changeMessages); 
eval (layerRef+ 'startingMsg'+ closeit);} 
} 


“解释 菜单 . js” 文件 要 存放 在 包含 它 的 . htm 文件 相同 的 文件 夹 内 。 
2. 创建 CSS 文件 
例 4.21 编写 用 来 定义 页 面 使 用 样式 的 CSS 文件 ,保存 文件 为 “解释 菜单 的 样式 


» 
.CSS 。 
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解释 菜单 的 样式 . css 文件 的 代码 如 下 : 


< Style type= "text/css"> 
半 且 二 一 
# startingMsg {position: absolute; background: # FFFFFF; height: 10; top: 70; text— align: 
miqgddle; 
font- family:Arial;color:# 000000; left:200} 
bffont- family:" 宋 体 "; color:red;} 
a:link{color:green; text- decoration:none} 
a:visited{color:red; text- decoration:none} 
a:hover{color:blue; text- decoration:overline; font- size:26pt} 
一 -> 


</style > 


“解释 菜单 的 样式 . css” 文 件 存 放 在 与 包含 它 的 . htm 文件 同 级 的 CSS 文件 夹 内 。 例 
如 ,在 “程序 ”文件 夹 下 包含 有 HTML 与 CSS 两 个 同 级 的 子 文件 夹 ,HTML 中 存放 . htm 
文件 ,CSS 子 文件 夹 存放 CSS 文件。 

当然 可 以 存放 在 包含 它 的 . htm 文件 的 相同 文件 夹 内 ,只 是 在 链接 CSS 文件 是 路 径 
不 同 。 

注意 : CSS 文件 与 JS 文件 不 同 , 它 以 二 style type 一 "text/css" 过 标记 码 开 头 , 以 
二 /style 二 标记 码 结 束 。 


3. 创建 包含 JS 与 CSS 文件 的 HTML 文件 


例 4.22 编写 显示 解释 菜单 的 页 面 文件 ,保存 文件 为 4-20. htm。 
4-20. htm 文件 的 代码 如 下 : 


<html> 
<head> 
<link rel= stylesheet href="../CSS/ 解 释 菜 单 的 样式 .css" type= "text/css"> 
< script src= "解释 菜单 .js" language="Javascript" type= "text/javascript"> 
< /script> 
< /head> 
<body> 
<table width= "760" border= "0" cellspacing= "0" cellpadding= "0"> 
<tr><td> 
<a href= "4- 1.htm" onMouseOver= "mover (0)" onMouseOut= "mout (0) "> 4- 1.htm< /a> 
<p><a href= "4- 2.htm" onMouseOver= "mover (1)" onMouseOut= "mout (1)"> 4- 2.htm< /a> 
<p><a href= "4- 3.htm" onMouseOver= "mover (2)" onMouseOut= "mout (2) "> 4- 3.htm /a> 
<p><a href= "http://www.263.net" onMouseOver= "mover (3)" onMouseOut= "mout (3) "> 首都 在 线 </ 
已 > 
<p><a href= "http://www.sina.com" onMouseOver= "mover (4) "onMouseOut= "mout (4) "> 新浪 网 
< /a> 
</td>< /tr> 
< /table> 


hans “。 


< div id= "startingMsg" style="left:106px; top:72px; width:260; height:16"> 


这 里 可 以 显示 不 同 的 菜单 解释 ! 
</div> 
< /body> 
</htm> 
在 浏览 器 中 打开 4-20. htm 网 页 ,可 以 看 到 如 图 4. 21 所 示 的 页 面 效果 。 
厦 c\LPsHAONpshao\ 5 二 Windows Internet Explorer 
= | 感 cALPSHAO\pshao\ 书 稿 \ 网 站 编程 技术 \ 程 "| 好 | X || Google RA- 


https//www.sina.com/ 于 计算 机 | 保护 模式 : 禁用 腿 100% ~ 


图 4.21 网 页 4-20. htm 的 页 面 效果 


4.5.2 淡 入 淡出 的 图 片 
例 4.23 一 个 包含 淡 入 淡出 图 片 的 文件 (4-21. htm)。 


<html> 
<body> 
< Script language= "JavaScript"> 
Var b=1; 
Var c=true; 
function fade(){ 
if(document .all); 
if(c==true) {b++;} 
if(b==100) {b-—-; c=false} 
if(b==10) {bt++; c=true;} 
if(c==false) {b-—-;} 
girl.filters.alpha.opacity=0+b; 
setTimeout ("fade ()",100); 
, 
setTimeout ("fade ()",100); 
</script> 
< img src="img/3.gif" width="120" height="90" name="girl" alt="Image" style="filter: 
alpha (opacity=0)"> 
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<P style= "position:absolute; left:206; top:40; width:200; height:100"> 淡 入 淡出 的 图 片 !</ 
p> 

< /body> 

</htm> 


在 浏览 器 打开 4-21. htm 网 页 ,可 以 看 到 如 图 4. 22 所 示 的 页 面 效 果 。 
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淡 入 淡出 的 图 片 ! 


图 4.22 网 页 4-21. htm 的 页 面 效 果 


4.5.3 以 不 同方 式 轮 显 图 片 
例 4.24 一 个 可 以 不 同方 式 轮流 显示 不 同 图 片 的 文件 (4-22. htmy) 。 


<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset= gb2312"> 
<title> 轮 显 的 图 片 < /title> 

< Script language= "javascript"> 
Var adImg=new Array () 7 

Var cID=0; 
adImg[0]="img/1.jpg"; 
adImg[1]="img/2.jpg"; 

adImg [2]="img/3.jpg"; 

adImg [3]="img/4.jpg"; 
adImg[4]="img/5.jpg"; 
adImg[5]="img/6.jpg"; 
adImg[6]="img/7.jpg"; 
adImg[7]="img/8.jpg"; 

adImg [8]= "img/9.jpg"; 


var preImgs=new Array (); 
for(i=0; i<9; i++) 

. 

preImgs [i]=new Image (); 


几 malo 。 


PreImgs [I] .src= aqImg[i]7 
} 
function NextAd() 
{ 
if (cID== 9)cID=0; 
if(document .all) 
{ 
frmLS .ijmgLS .filters.FrevealTrans .Transition=Math.floor (Math.random() * 23); 
frmLS.imgLSs.filters.revealTrans .apply (); 
frmLS .imgLS .src=adImg [cID]; 
frmLs.imgLSs.filters.revealTrans.play (); 
CID+ 二 7 
setTimeout ("NextRd ()"，10000) 7 
} 
} 
</script> 
< /head> 
<body background= img/xuehua2 .gif> 
<hl> 轮 流 显 示 不 同 的 图 片 效 果 !< /hl> 


< form name= frmLS> 


<palign= "center"> 

< img src= "javascript:NextAd()" name= "imgLS" width= "550" height= "400" hspace= "0" Vspace 
="0" border= "0" align= "left" 

style= "FILTER: revealTrans (duration= 6, transition= 20); BORDER— RIGHT:# cccccc lpx solid; 
BORDER— TOP:# cccccc lpx solid; BORDER- LEFT:# cccccc lpx solid; BORDER- BOTTOM:# cccccc lpx 
solid" > 

</p> 

< /form> 

< /body> 

</html> 


在 浏览 器 打开 4-22. htm 网 页 ,可 以 看 到 如 图 4. 23 所 示 的 页 面 效 果 。 
4.5.4 在 网 页 中 使 用 CSS 样式 的 三 种 方式 

通过 本 章 的 内 容 ,可 以 看 到 在 网 页 中 使 用 CSS 样式 有 如 下 3 种 不 同 的 方式 。 

lt 引入 


在 HTML 文档 的 二 style 二 标记 码 对 中 引入 CSS 代码 。 
引 大 方式 如 下 ; 


<style type= "text/css">Css 代码 < /style> 


其 中 二 style 二 中 的 "type 一 "text/css" 的 含义 是 告诉 浏览 器 二 style 二 标记 码 对 中 的 代 
码 是 用 来 定义 样式 的 。 
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图 4.23 网 页 4-22. htm 的 页 面 效 果 


即 把 CSS 代码 直接 从 入 在 HTML 标记 码 行内 ,直接 将 CSS 样式 定义 在 指定 标记 码 
上 ,例如 一 个 表格 .一 个 图 片 或 一 段 文字 的 标记 码 中 ,这 个 样式 不 会 被 其 他 标记 码 使 用 。 
内 髓 方式 如 下 : 


< 标记 码 style= "属性 名 :属性 值 ; 属性 名 :属性 值 ; …; 属性 名 :属性 值 ; ">…< /标记 码 > 
3. 链接 


即 把 CSS 代码 单独 保存 为 后 级 名 为 . css 的 文本 文件 ,然后 在 使 用 样式 的 网 页 中 引入 
CSS 文件。 
引入 方式 如 下 ， 


< link rel= stylesheet href= "样式 表 文 件 名 .css" type= "text/css"> 


其 中 一 link 二 标记 的 属性 rel 二 stylesheet 用 来 说 明 链 接 的 对 象 是 一 个 样式 表 
(stylesheet) 文 件 ,属性 href 二 "样式 表 文 件 名 . css" 用 来 指定 CSS 文件 的 名 称 与 路 径 。 

链接 这 种 方式 非常 适宜 多 个 页 面 使 用 相同 的 样式 ,可 减少 大 量 的 元 余 代码 。 

例如 ,可 以 通过 下 面 的 代码 使 用 CSS 文件 manager. css 和 peixun. css 设置 HTML 
文件 的 风格 。 


<headq> 


al2 » 


<link rel= stylesheet href= "CSS 文档 /manager.css" type= "text/css"> 
<link rel= stylesheet href= "CSS 文档 /peixun.css" type= "text/css"> 
< /head> 


4. 优先 级 


以 上 3 种 应 用 CSS 的 方式 可 在 同一 网 页 文件 中 使 用 ,它们 的 优先 级 是 内 其 二 引入 二 
链接 ,可见 越 靠近 页 面 元 素 的 样式 属性 优先 级 越 高 , 即 元 素 最 终 显 示 的 样式 是 优先 级 最 高 
的 样式 定义 ,同时 各 元 素 会 自动 继承 上 级 元 素 中 定义 的 样式 。 


4.6 思考 与 练习 


4.6.1 思考 题 


4-1 什么 是 CSS? 它 有 什么 作用 ? 

4-2 定义 CSS 的 语法 结构 有 哪 两 种 结构 ? 

4-3 ”定义 CSS 有 哪 几 种 方式 ? 在 应 用 定义 的 样式 时 有 什么 不 同 ? 

4-4 如 何 将 CSS 定义 代码 引入 到 网 页 文件 中 ? 

4-5 如 何 使 用 CSS 字体 属性 设置 页 面 的 字体 格式 ? 

4-6 如 何 使 用 CSS 颜色 和 背景 属性 设置 页 面 字体 的 颜色 和 背景 效果 ? 
4-7 如 何 为 文本 和 图 片 设置 边 距 属性 ? 


4.6.2 上 机 练习 


4-1 创建 一 个 包含 有 文字 样式 .背景 和 颜色 样式 、. 空 间 定位 样式 的 . css 文件 ,并 将 
.css 文件 引入 . htm 文件 中 使 用 其 设置 的 样式 。 

4-2 创建 一 个 网 页 文件 ,使 用 CSS 属性 在 打开 网 页 时 可 以 随机 显示 不 同 的 图 片 。 

4-3 创建 一 个 包含 文本 与 图 片 对 象 的 网 页 文件 ,对 图 片 设 置 透明 效果 ,对 文本 设置 
透明 效果 。 

4-4 创建 一 个 包含 文本 的 网 页 文件 ,对 文本 设置 模糊 效果 投影 效果 。 

4-5 创建 一 个 包含 文本 与 图 片 对 象 的 网 页 文件 ,对 文本 和 图 片 分 别 设置 波纹 效果 。 

4-6 创建 一 个 包含 文本 的 网 页 文件 ,对 文本 设置 不 同 的 发 光 效 果 。 

4-7 创建 一 个 包含 图 片 对 象 的 网 页 文件 ,对 图 片 设 置 X 射线 效果 、 翻 转 效果 。 

4-8 分 别 创建 JS 文件 .CSS 文件 与 . htm 文件 ,通过 . htm 文件 在 页 面 指定 位 置 显示 
一 个 淡 入 淡出 的 图 片 、 在 指定 位 置 显示 向 上 滚动 的 菜单 ,在 指定 位 置 显 示 带 有 边框 的 
文字 。 
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第 5 商 | 


Java 服务 网 页 一 一 JSP 


在 Sun 公司 正式 发 布 JSP(Java Server Pages) 后 ,这 种 新 的 Web 应 用 开发 技术 很 快 
引起 了 人 们 的 关注 。JSP 为 创建 高 度 动态 的 Web 应 用 提供 了 一 个 独特 的 开发 环境 。 按 照 
Sun 公司 的 说 法 ,JSP 能 够 适应 市 场 上 包括 Apache Web Server IIS 在 内 的 85% 的 服务 
器 产品 。 从 本 章 开 始 将 介绍 如 何 使 用 JSP 创建 动态 网 页 的 方法 。 

本 章 的 内 容 主要 解决 以 下 问题 : 

。 如 何 构 建 JSP 的 运行 环境 ; 

。 如 何 使 用 JSP 创建 动态 网 页 ; 

。 JSP 有 哪些 基本 语法 知识 ; 

。 JSP 有 哪些 常用 的 内 置 对 象 ; 

JSP 有 哪些 常用 的 动作 标记 码 ; 

。 什么 是 JavaBean; 

如 何在 JSP 文件 中 使 用 JavaBean; 
。 如 何 通过 虚拟 目录 运行 JSP 文件。 


5.1 构建 JSP 的 运行 环境 


本 节 主 要 介绍 构建 JSP 运行 环境 的 方法 与 步骤 。 


5.1.1 下 载 与 安装 SDK 


1. 下 载 SDK 软件 包 


为 了 建立 JSP 的 运行 环境 ,需要 先 下载 Sun 公司 免费 的 .最 新 的 Java EE SDK 软件 
包 。Java EE SDK 是 集成 的 开发 环境 ,同时 可 下 载 捆 绑 的 JDK 软件 包 ,JDK 中 包含 对 编 
程 最 有 用 的 是 Java 编译 器 .Applet 查看 器 和 Java 解释 器 。 

下 载 软件 Java EE SDK 可 参考 以 下 步骤 (注意 ,由 于 网 站 经 常 更 新 ,页 面 会 不 同 ) : 

(1) 在 浏览 器 中 输入 http://java. sun. com/, 可 看 到 图 5.1 所 示 的 Sun 公司 网 站 
页 面 。 
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图 5.2 选择 “包括 JDK 下 载 ” 


时 100% 


(3) 如 图 5.2 所 示 ,在 页 面 Downloads 标签 下 可 看 到 免费 下 载 的 软件 名 称 ,这 里 显示 
的 是 “Java 应 用 程序 平台 工具 包 更 新 版 (Java EE 5 SDK Update)”, 在 其 栏 中 单 击 
Download with JDK 按钮 ,可 打开 图 5.3 所 示 的 页 面 。 

(4) 选择 “I agree …” 选 项 ,同意 Sun 公司 的 协议 , 单 击 Continue 今 按钮 ,可 进入 到 
图 5.4 所 示 的 下 载 页 面 .选择 “Java EE 5 SDK Update 4 (with JDK)” 选 项 。 
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图 5.4 下 载 软件 页 面 


(5) 单 击 Download Selected with Sun Download Manager 今 按钮 ,下 载 一 个 Sun 提 


供 的 下 载 管理 器 ,开始 下 载 工作 .如 图 5.5 所 示 。 


2. 安装 SDK 


运行 下 载 的 “java_app_platform_sdk-5_04-windows. exe” 软 件 包 ,可 安装 SDK ,在 安 
装 过 程 中 可 以 设置 安装 路 径 及 选择 组 件 , 系 统 默认 的 安装 路 径 为 C:\sun\sdk( 本 书 选 择 


的 安装 路 径 为 C:\sdk)。 
al6 。 
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图 5.5 下 载 软件 管理 器 
安装 过 程 与 其 他 软件 基本 相同 ,选择 接受 协议 , 单 击 Next 按钮 即 可 。 在 确定 安装 路 
径 页 面 中 ,注意 修改 安装 路 径 , 例 如 ,C:\sdk。 
在 确定 用 户 名 与 口令 安装 页 面 中 ,可 选择 任意 的 用 户 名 ,例如 lpshao ,口令 为 8 位 , 例 
如 ,12345678 。 


5.1.2 下 载 安 装 Java 软件 

为 了 在 浏览 器 中 正常 的 运行 JSP, 还 要 下 载 安 装 Java 软件 (Java Runtime 
Environment Version 5.0 Update 11) ,在 Sun 公司 网 站 主页 (http://java. sun. com/) 可 
以 看 到 起 国 二 图 标 , 单 击 该 图 标 可 打开 如 图 5. 6 所 示 页 面 , 单 击 * 立 即 下 载 "按钮 或 手 
工 下载 ? 超 链接 ,可 下 载 该 软件 。 


5.1.3 下 载 与 安装 Tomcat 


为 了 在 服务 器 中 管理 与 运行 JSP 文件 ,还 需要 下 载 Tomcat 软件 。Tomcat 是 
Apache 组 织 的 产品 ,是 一 个 开放 源 代 码 的 软件 , 它 完 全 免费 ,文档 齐全 ,配置 容易 , 它 是 运 
行 servlet 和 JSP 的 服务 器 管理 软件 ,负责 处 理 用 户 发 送 来 的 请 求 , 并 把 该 请 求 送 到 指定 
的 servlet ,处 理 完 之 后 再 将 结果 送 给 用 户 。 


1. 下 载 Tomcat 


下 载 Tomcat 软件 的 可 到 Apache 公司 网 站 : http://tomcat. apache. org/ ,也 可 在 国 
内 站 点 免费 下 载 。 其 Apache 网 站 页 面 如 图 5.7 所 示 。 在 其 左边 单 击 Tomcat 6. x 超 链 
接 , 打 开 下 载 6. x 版 本 及 更 新 版 本 页 面 .如 图 5.8 所 示 。( 建 议 下 载 Tomcat 6. x 版 本 ,本 
书 以 6.0.14 版 本 为 例 介 绍 ,下 载 时 注意 要 选择 支持 Windows 系统 )。 
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图 5.8 Tomcat 6. x 下 载 路 径 


2. 安装 Tomcat 


安装 tomcat 可 参考 如 下 步骤 

(1) tomcat 下 载 完成 后 ,再 其 存放 目录 双击 jakarta-tomcat-6. 0. 14. exe, 可 开始 安 
装 。 显 示 如 图 5. 9 所 示 的 安装 页 面 。 
国 


Apache Tomcat Setup EE 


Welcome to the Apache Tomcat 
Setup Wizard 


This wizard will guide you through the installation of Apache 
Tomecat. 


It is recommended that you close al other applications 
before starting Setup. This wil make it possible to update 
relevant system fies without having to reboot your 
Computer. 


Chick Next to continue， 


tomcat.apache.org 


Apache Tomcat 6 
http: 


fa 


图 5.9 欢迎 安装 的 对 话 框 页 面 


EEses core | 


(2) 在 欢迎 安装 对 话 框 界面 单 击 Next 按钮 显示 如 图 5. 10 所 示 的 协议 页 面 。 
(3) 在 如 图 5. 10 所 示 协 议 对 话 框 中 , 单 击 I Agree 按钮 ,显示 如 图 5. 11 所 示 页 面 , 选 
择 Full 完全 安装 方式 ,选择 Examples 选项 , 单 击 Next 按钮 显示 如 图 5. 12 所 示 页 面 。 
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License Agreement 
Please review the license terms before instaling Apache Tomcat. 


Press Page Down to see the rest of the agreement. 


Apache License 
Yersion 2.0, January 2004 国 


TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 
1. Definitions. 


"License” shall mean the terms and conditions For use, reproduction, 
and distribution as defined by Sections 1 through 9 of this document. 


fF you accept the terms of the agreement, click I Agree to continue. You must accept the 
agreement to install Apache Tomcat. 


Nullsoft Install 5ystem v2.22 


(<p |G raoreds] Eco 
图 5.10 协议 对 话 框 页 面 


国 Mpache Tomeat 


Choose Components 
Choose which features of Apache Tomcat you want to install. 


Check the components you want to instal and uncheck the components you don't want to 
| install, cick Next to continue. 


Select the type of install: 

Or, select the optional Description 
components you wish to Posltion your mouse 
install: over a component to 


see lts description, 


Space required: 10.0MB 
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图 5.11 选择 安装 方式 


reecte Toment soup ES te 
Choose Install Location 
Choose the folder in which to install Apache Tomcat. 


ee ee 
Browse and select another folder. Click Next 


Destination Folder 


[Evomeat 6.0 ] (rewsesss) 


Space required: 10.0MB 
Space available: 11.7GB 
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5.12 选择 安装 路 径 


(4) 在 如 图 5.12 所 示 页 面 中 ,选择 Tomcat 软件 的 安装 路 径 ( 本 书 选择 C:\Tomcat 
6. 0) , 单 击 Next 按钮 显示 如 图 5. 13 所 示 页 面 。 


(5) 在 如 图 5. 13 所 示 对 话 框 中 ,修改 用 户 名 ,本 书 修改 为 lpshao, 口 令 为 空 , 单 击 
Next 按钮 显示 如 图 5. 14 所 示 页 面 。 
Bpache Tomeat = 


== 
Configuration 
Tomcat basic configuration. 
5060 
Ipshao 


HTTPI11.1 Connector Port 


Administrator Login 


User Name 


Password 


Nullsoft Install System Y2.22 


图 5.13 选择 用 户 名 与 口令 


(6) 选择 Java 虚拟 机 的 路 径 , 输 入 c:\sdk\jdk( 或 系统 自 找 的 Java 虚拟 机 路 径 ) , 单 
击 Install 按钮 ,开始 在 计算 机 中 安装 Tomcat 软件 。 


Java Virtual Machine 
Java Virtual Machine path selection. 


| 


| Please select the path of a J25E 5.0 JRE instaled on your system: 


[cvsdkudM | 国 


Nullsoft Install System v2.22 | 


图 5.14 确定 Java 虚拟 机 的 路 径 


(7) 耐心 等 待 系统 自动 安装 完毕 ,会 出 现 安装 进度 显示 ,如 图 5. 15 所 示 。 

(8) 安装 完毕 后 ,会 显示 如 图 5. 16 所 示 界 面 : 单 击 Finish 按钮 可 结束 Tomcat 软件 
安装 工作 。 

(9) 接着 会 在 “记事 本 ”打开 英文 的 使 用 注意 事项 。 在 计算 机 屏幕 右 下 角 会 看 到 
Tomcat 服务 器 图 标 圆 . 在 浏览 器 中 输入 http://localhost:8080, 如 果 看 到 如 图 5. 17 所 
示 的 tomcat 欢迎 页 面 ,说 明 Tomcat 安装 成 功 了 。 
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四 EderanaaaaaEEEEEEEE 


Installing 
Please wait while Apache Tomcat is being instaled. 


Downloading tenative-1.dl 
| ee—】〉 
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图 5.15 安装 状态 


国 Apache Tomcat Setup TS Lo | 
二 Completing the Apache Tomcat 
让 Setup Wizard 
\D 2 
= Apache Tomcat has been instaled on your computer, 
司 Cick Finish to close this wizard. 
OE 
F 5 
由 二 国 Run Apache Tomcat 
后 
吕 三 团 Show Readme 
& 
| 
coeck | rnsh [a] (cancel 


图 5.16 安装 结束 页 面 


箱 Apache Tomcat - Windows Internet Explorer 
GO [rpyocahostsos0/ >| [|x) Goo0e 二 


立 件 日 。 编 给 (6 吾 看 WD) 疏 靖 实 (A) 工具 DD 者 助 (DD 


次 安 | 出 |- 园 hpadeTomcat x | 下 国 (lenovo ch | |: 从" 国 -向 WD 全 IRWD 人 @” 
Apache Tomcat 
< The Apache Software Foundation 
http://www.apache.org/ 


Ifyou're seeing this page via a web browser, it means you've setup Tomcat 
successfully. Congratulations! 


As you may have guessed by now, this is the default Tomcat home page lt can be 
found on the local filesystem at 


SCATALINA_ HOME/webapps/ROoT/index.html 


where "$CATALINA_HOME" is the root of the Tomcat installation directory If you're 
Seeing this page. and you don't think you should be. then either you're either a user 
who has arrived at new installation of Tomcat, or you're an administrator who hasn't 
got his/her setup quite right. Providing the latter is the case, please refer to the 
Tomcat Documentation for more detailed setup and administration information than 
is found in the INSTALL file. 


Home Peage NOTE: For security reasons, using the administration webapp is restricted 


加 


人 三 地 Intranet | 保护 楼 式 : 启用 R100% ~ 


图 5.17 Tomcat 欢迎 页 面 


(10) 启动 与 关闭 Tomcat 服务 器 

在 Windows 界面 选择 “开始 ”>“ 所 有 程序 ”>Apache Tomcat 6. 0 一 Monitor Tomcat 
或 Start Tomcat 命令 ,在 计算 机 屏幕 下 方 会 看 到 Tomcat 开始 运行 的 图 标 咒 ,如 果 图 标 为 
圆 .可 右 击 图 标 在 快捷 菜单 选择 Start Service 命令 ,服务 器 启动 后 右 击 图 标 在 快捷 菜单 选 
择 Stop Service 命令 将 停止 Tomcat 服务 ,选择 Exit 可 关闭 Tomcat 服务 器 。 


3. 设置 Windows 的 环境 变量 


使 用 版 本 高 的 Tomcat(6. 0.X 以 上 ) 中 可 以 不 设置 环境 变量 , 即 可 在 打开 Tomcat 服 
务 器 时 正常 运行 JSP 文件 。 

如 果 Tomcat 版 本 低 ,不 能 正常 运行 JSP 文件 ,可 参照 下 面 的 介绍 去 设置 Windows 
系统 的 “环境 变量 ”。 

设置 Windows 环 境 变量 ”的 操作 步骤 : 

(1) 在 Windows 桌面 上 右 击 “计算 机 ”( 我 的 电脑 ) 一 “属性 "命令 ,打开 “系统 ”页 面 如 
图 5. 18 所 示 , 单 击 “ 高 级 系统 设置 ”选项 ,打开 “系统 属性 ”对 话 框 ,从 中 选择 “高 级 ”标签 ， 
如 图 5. 19 所 示 。 


生 口 -下 控制 W 析 系统 


查看 有 关 计 算 机 的 基本 信息 

Windows 版 本 
‘Windows Vista™ Home Basic 
版 权 所 有 (C) 2006 Microsoft Corporation. 保留 所 有 权利 。 
升级 Windows Vista(G) 


Windows Update(U) Windows 体验 索引 : 未 分 级 


安全 中 心 (9) 2 Intel(R) Core(TM)2 Duo CPU T7100 @ 1.80GHz 1.8 
性 部 (P) 982 MB 3 
器 


图 5.18 系统 页 面 


(2) 在 图 5. 19 中 单 击 “环境 变量 ”按钮 ,打开 “环境 变量 ”对 话 框 ,如 图 5. 20 所 示 。 
(3) 在 “用 户 变量 ” 框 中 单 击 “新 建 > 按 钮 ,分 别 创建 环 境 变量 : JAVA_HOME、 
TOMCAT_HOME、PATH、CLASSPATH。 SDK 的 安装 目录 在 JAVA_HOME 变量 之 
中 ,Tomcat 的 安装 目录 在 TOMCAT_HOME 变量 之 中 。 
。 JAVA_HOME 变量 值 : C:\sdk\jdk( 要 看 自己 SDK 的 安装 路 径 ) 。 
。 TOMCAT_HOME 变量 值 : C:\Tomcat 6. 0( 要 看 自己 Tomcat 的 安装 目录 ) 。 
。 CLASSPATH 变量 值 :“. ;%JAVA_HOME%N\bin; %TOMCAT_HOME%A\ 
lib; ?或 “. ;%JAVA_HOME%Nbin; M%TOMCAT_HOME%ANlib;%TOMCAT _ 
HOME%ANlib jsp-api. jar; % TOMCAT _ HOME%\lib\servlet-api. jar;c: \sdk\ 
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Tr 三 芷 机 Ex 高 级 Fr 
要 进行 大 多 数 更 改 ， 您 必须 作为 管理 员 登 录 。 
性 能 

视觉 效果 ， 处 理 器 计划 ， 内 存 使 用 ， 以 及 虚拟 内 存 


[设置 G)... ) 


用 户 配置 文件 
与 您 登录 有 关 的 桌面 设置 


[设置 中 .| 


图 5.19 “系统 属性 "对话 框 


C:\Windows\systen32\cnd. exe 
CL... Wm 
sg 
Windows_NT = 


Ev 
CD Cw | 


图 5.20 “环境 变量 ”对 话 框 


jdk\lib\tools. jar” 。 
。 PATH 变量 值 : C:\sdk\jdk\bin。 
(4) 单 击 “ 确 定 ” 按 钮 ,可 结束 环境 变量 的 设置 。 


5.1.4 创建 JSP 用 户 目录 


在 C:\Tomcat 6. 0\webapps\ROOT 根 文 件 夹 下 ,创建 一 个 用 户 使 用 的 文件 夹 
m24 。 


myjsp, 以 后 编写 的 JSP 程序 将 放 在 myjsp 目录 下 。 
5.1.5 运行 JSP 程序 
1. 编写 第 一 个 JSP 网 页 文件 
例 5.1 一 个 显示 当前 日 期 和 “世界 你 好 ”的 JSP 网 页 文件 (5-1. jsp)。 


<html> 

<body> 

< font color= "blue"> 现 在 时 间 是 

<$%= (new java.util.Date()) -上 toString () 科 > 
<p> 世 界 你 好 ! 

</font> 

< /body> 

</html> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/5-1.jsp, 运 行 结果 如 图 5. 21 所 示 。 


现在 时 间 是 Jon Apr 21 16:53:16 CST 2008 
世界 你 好 ! 


人 本 地 Intranet | 保护 模式 : 启用 护 100% ~ .| 


图 5.21 5-1.jsp 的 运行 结果 


2. 知识 点 归纳 


(1) 从 例 5.1 可 以 看 出 ,JSP 网 页 文档 中 使 用 的 代码 与 HTML 文档 中 的 标记 码 几 乎 

一 样 ,只 有 二 % 二 (new java. util. Date()). toString() 吕 二 这 一 行 没 见 过 。 不 过 可 以 
很 容易 猜 出 它 的 意思 ,无非 是 将 当前 日 期 显示 出 来 。 说 明 JSP 与 HTML 有 很 多 类 似 的 
地 方 。 

(2) 同 HTML 文件 比较 ,JSP 文件 中 多 了 两 个 符号 二 % 和 % 二 ,这 是 JSP 的 定 界 
符 , 它 用 来 分 隔 HTML 标记 码 与 JSP 代码 ,二 % 和 %% 二 中间 的 内 容 是 JSP 代码 。 

(3) 通过 例 5. 1 可 知 ,JSP 文档 主要 包括 HTML 的 标记 码 和 JSP 代码 。HTML 标 
记 码 用 一 对 尖 括 号 过 二 括 起 来 。JSP 的 代码 使 用 一 对 尖 插 号 和 百 分 号 二 %% 二 括 起 来 。 
包含 JSP 代码 的 文件 后 组 名 为 . jsp, 文 件 要 存放 在 服务 器 下 的 \Tomcat 6. 0\webapps\ 
ROOT\myjsp 目录 下 。 


。， 1135 


5.1.6 编辑 JSP 文件 的 软件 工具 


在 编写 JSP 网 页 文件 时 可 使 用 EditPlus 编辑 软件 , 它 可 以 编辑 HTML、ASP、JSP、 
Perl Java 等 语句 ,而 且 可 以 高 亮 显示 语句 区 ;还 可 以 自己 定义 自己 的 工具 栏 , 甚 至 快捷 方 
式 。 使 用 起 来 很 方便 。 在 网 上 可 以 免费 下 载 该 软件 。 

在 进行 大 型 JSP 项 目 时 ,还 可 以 使 用 开发 平台 MyEclipse, 先 到 Eclipse 官方 网 站 
http://www. eclipse. org/ 下 载 Eclipse 的 安装 软件 ,然后 在 Eclipse 中 安装 MyEclipse 插 
件 即 可 组 建 一 个 MyEclipse 开发 平台 。 


5.1.7 JSP 的 运行 流程 


JSP 具有 一 次 编译 ,多 次 ,多 处 执行 ,代码 执行 效率 高 的 特点 。 当 Web 服务 器 第 一 次 
接收 到 用 户 的 JSP 页 面 请 求 时 ,JSP 容器 (Tomcat) 先 将 JSP 页 面 编译 为 Servlet 类 文件 
(. class) ,接着 运行 Servlet 类 文件 对 客户 端的 请 求 进行 处 理 ,执行 其 中 的 Java 程序 片段 ， 
然后 将 执行 结果 返回 给 JSP 容器 ,最 后 以 HTML 格式 传 回 给 用 户 ,如 图 5. 22 所 示 。 


请 求 
JSP 网 页 


GE 请求 JSP 网 了 


i | 
-= 


JSP 容 器 
Tomcat 


了 
编译 成 Servlet 
类 文件 


{.class) 


ee 
工作 站 


图 5.22 JSP 网 页 运行 流程 


以 后 再 有 同样 的 JSP 请 求 时 ,无 需 重 新 编译 ,直接 执行 已 编译 好 的 . class 文件 即 可 ， 
因此 执行 效率 特别 高 。 如 果 JSP 网 页 代码 发 生 了 改变 , 则 需要 重新 编译 ,如 图 5. 22 所 示 。 


5.2 JSP 的 基本 元 素 


JSP 网 页 就 是 在 HTML 网 页 中 包含 了 能 够 产生 动态 内 容 的 Java 程序 代码 。 在 通常 
情况 下 ,JSP 文件 (以 .jsp 作为 后 缀 名 ) 可 以 包含 HTML 语言 编写 的 静态 页 面 内容 与 JSP 
基本 语句 ,JSP 基本 元 素 主要 包含 JSP 指令 语句 、JSP 注释 语句 .JSP 声明 语句 、JSP 表达 
式 语句 和 Java 程序 片段 。 

本 节 的 内 容 主 要 介绍 JSP 基本 语句 的 使 用 方法 。 
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5.2.1 JSP 指令 语句 


位 于 二 %@ % 二 标记 中 的 代码 , 称 为 JSP 编译 器 指示 指令 ,简称 为 指令 。JSP 指令 
用 来 设置 整个 JSP 页 面 的 相关 属性 ,包括 网 页 的 编码 方式 .语言 等 。 

JSP 指令 语句 的 一 般 语 法 格式 为 : 

<s%e 指令 名 属性 =" 属 性 值 "%> 

常用 的 指令 有 page、include 和 taglib。 


1. page 指令 


page 指令 用 来 定义 JSP 文件 的 全 局 属性 ,作用 于 整个 JSP 页 面 ,如 使 用 的 语言 .是 否 
维持 会 话 状态 、 是 否 使 用 缓冲 区 等 。 例 如 : 
。 语句 二 %@ page language 一 "java" %% 二 定义 了 本 JSP 文件 使 用 的 是 Java 语言 。 
。 请 句 二 %@ page import 一 "java. util. Date”% 记 用 来 导入 支持 的 Java 类 。 
。 语句 二 %@ page errorPage 一 "errorPage. jsp"”%% 二 用 来 指定 本 JSP 文件 出 现 
Java 问题 时 显示 的 出 错 页 面 。 
。 语句 二 %@ page session 一 "true"%% 二 用 来 定义 是 否 需 要 为 用 户 管理 通话 期 的 信 


息 session 。 
2. include 指令 


include 指令 用 来 在 JSP 文件 中 包含 一 个 静态 文件 ,同时 解析 这 个 文件 中 的 JSP 语 
句 。 例 如 ,语句 二 %@ include file 二 "filename.jsp”% 记 中 使 用 include 指令 向 JSP 容器 
发 送 了 一 个 消息 : 将 在 文件 filename. jsp 中 找到 的 文本 在 转换 后 插入 到 当前 的 JSP 网 
页 中 。 

使 用 include 指令 即 在 当前 文件 中 插入 一 个 包含 文件 filename. jsp, 所 包含 的 文件 可 
以 是 固定 格式 的 HTML 或 是 JSP 等 。include 指令 的 优点 是 代码 重用 。 

3. taglib 指令 

taglib 是 与 标记 (标签 ) 相 关 的 指令 ,用 来 定义 一 个 标记 库 以 及 其 自 定 义 标记 的 前 绥 ， 
声明 此 JSP 文件 使 用 的 自 定义 标记 。 例 如 ,通过 下 面 的 语句 定义 了 自 定 义 标 记 loop。 
public 为 自 定义 标记 的 前 缀 ,uri 声明 了 标记 库 ( 命 名 空间 ) 。 

<$%Q@ taglib uri= "http://www.jspcentral.com/tags"” prefix= "public"g > 

< public:loop> 


< /public:1loop> 


5.2.2 JSP 注释 语句 
JSP 注释 语句 是 JSP 文件 中 的 注解 语句 ,是 为 了 增加 程序 的 可 读 性 而 编写 的 语句 ,对 
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程序 的 运行 结果 没有 影响 。 

JSP 注释 语句 格式 如 下 : 

<s#s- -注释 内 容 --%> 

例如 ,下 面 的 语句 就 是 一 个 注释 语句 : 

<$%-- 这 是 JSP 的 注释 语句 --%> 

注意 : HTML 使 用 的 注释 标记 为 二 1! 一 这 里 是 注解 一 ! 二 ;JavaScript 使 用 的 注释 标记 
为 //( 单 行 注释 ) 和 / x ,…,x*/( 多 行 注释 )。 
5.2.3 JSP 声明 语句 

JSP 声明 语句 是 用 来 在 JSP 文件 中 定义 页 面 级 变量 或 方法 的 。 目 的 是 让 编译 器 知道 
哪些 变量 和 方法 是 合法 的 。 通 过 JSP 声明 语句 可 以 声明 一 个 或 多 个 变量 和 方法 ,在 声明 
语句 中 声明 的 变量 和 方法 将 在 JSP 页 面 初始 化 时 被 初始 化 。 

JSP 声明 语句 的 语法 格式 如 下 : 

<$! 类 型 变量 或 方法 名 ; %> 

例如 ,下 面 的 声明 语句 声明 了 整 型 变量 i, 字符 串 型 变量 s: 

<%! int i=0; %> 

<%!1 String s=" 你 好 !"; %> 

注意 : 和 |! 之 间 不 能 有 空格 ,而 且 一 条 声明 语句 不 能 分 在 两 行 写 , 一 定 要 以 分 号 (;) 
结束 声明 语句 ,就 像 在 普通 Java 中 声明 成 员 变 量 一 样 。 因 为 JSP 中 的 任何 内 容 都 必须 
是 有 效 的 Java 语句 。 

在 JSP 中 除了 可 以 声明 在 JavaScript 中 使 用 的 6 种 数据 类 型 变量 外 ,可 以 声明 Java 
语言 中 支持 的 所 有 数据 类 型 变量 。 
5.2.4 JSP 表达 式 语句 

JSP 表达 式 语句 提供 了 一 种 简单 的 输出 形式 ,在 运行 后 会 将 JSP 生成 的 数值 转化 的 
字符 串 嵌 入 在 HTML 页 面 的 相应 位 置 显示 。 其 中 的 表达 式 与 JavaScript 中 使 用 的 表达 
式 基 本 相同 。 

JSP 表达 式 语句 的 语法 格式 为 : 

<%= 表 达 式 %> 

例如 在 例 5.1 中 ,使 用 了 表达 式 输出 了 当前 日 期 的 值 : 

<$%= (new java.util.Date()) .tostring()%> 

还 可 以 使 用 下 面 的 语句 输出 已 声明 的 整 型 数据 i 和 字符 串 s 的 值 : 

<$=i%> 

<$=s%> 
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5.2.5 Java 代码 片段 
1. Java 代码 片段 的 作用 


位 于 二 % % 二 标记 中 的 代码 块 用 来 答 入 描述 JSP 页 面 动态 处 理 逻 辑 的 Java 语言 代 
码 , 它 们 称 为 Java 代码 片段 或 脚本 片段 (Scriptlets) 。Java 代码 片段 在 Web 服务 器 响应 
请 求 时 会 被 服务 器 运行 处 理 , 完 成 动态 处 理 功能 


2. 编写 带 有 Java 代码 片段 的 JSP 文件 

例 5.2 使 用 Java 的 for 循环 语句 片段 以 及 JSP 表达 式 分 别 以 不 同 字 体 标 记 显 示 
“你 好 ”的 JSP 文件 (5-2.jsp) 。 

<s#--JSsP 基 本 语法 练习 --#> 


<% for (int i=1; i<=4; i++){%> 
<H<%=i%>> 你 好 < /H<%=i%>> 
<%}%> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/5-2.jsp, 运 行 结果 如 图 5. 23 所 示 。 


你 好 
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图 5.23 5-2.jsp 运行 结果 


3. 知识 点 归纳 


(1) 在 JSP 文件 中 通过 二 % % 二 标记 嵌入 Java 代码 , 例 5. 2 中 嵌入 了 "for(Cint i 二 1; 
i 二 二 4; i 十 十 ) {”。Java 的 for 循环 语句 。 

(2) 在 JSP 文件 中 使 用 变量 时 需要 要 先 声 明 变 量 类 型 与 变量 名 。 

(3) JSP 代码 与 HTML 标记 可 以 混合 使 用 ,在 HTML 标记 中 可 以 租 入 JSP 代码 。 
例如 : 


<H<%=i%>> 你 好 < /H<gs=ig>> 。 
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5.3 JSP 常用 的 内 置 对 象 


为 了 简化 JSP 语句 ,JSP 定义 了 一 组 可 以 直接 使 用 的 内 置 对 象 。 这 些 对 象 包含 在 
JSP 页 面 中 ,浏览 器 在 编译 JSP 页面 时 会 自动 识别 所 包含 的 内 置 对 象 。 内 置 的 意思 是 这 
些 对 象 可 以 直接 引用 ,不 需要 显 式 地 声明 ,也 不 需要 专门 的 代码 创建 实例 对 象 。 

本 节 的 内 容 主要 介绍 几 个 常用 的 JSP 内 置 对 象 的 使 用 方法 。 


5.3.1 获取 输入 信息 的 request 对 象 


下 面 通过 一 个 HTML 文件 与 一 个 JSP 文件 介绍 如 何 使 用 JSP 的 内 置 对 象 request 
获得 用 户 在 页 面 上 输入 的 信息 并 将 信息 在 另 一 页 面 上 显示 。 


1. 编写 静态 的 HTML 页 面 文件 
例 5.3 创建 一 个 用 来 输入 用 户 信 息 的 静态 页 面 文件 (5-3. html 文件 ) 。 


<html> 

<head> 

<title> 输 入 信息 页 面 < /title> 

< /head> 

< form method=post action= "5- 4.jsp"> 
输入 姓名 < input type= "text" name= "yhm"> 
<input type= "submit" value= "提交 " > 

< /form> 

< /html> 


2. 编写 使 用 内 置 对 象 request 的 JSP 文件 
例 5.4 创建 输出 客户 信息 的 页 面 (5-4. jsp)。 


< font color= "blue"> 欢 迎 你 到 这 里 来 ， 

<%String yhml= request .getParameter ("yhm");%> 

<%=yhmls> 

<p> 这 里 是 学 习 JSP 动 态 网 页 编程 的 地 方 

</font> 

在 浏览 器 中 输入 http://localhost: 8080/myjsp/5-3. htm, 运行 结果 如 图 5. 24 
所 示 。 


3. 知识 点 归纳 


1) request 对 象 
5-4.jsp 中 使 用 了 JSP 内 置 对 象 request, 它 是 javax. servlet. ServletRequest 类 的 子 
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图 5.25 5-4.jsp 运行 的 结果 


类 对 象 ,在 传输 协议 HTTP 下 的 Web 应 用 中 ,request 对 象 作 为 HttpServletRequest 类 
的 一 个 对 象 , 其 作用 是 在 C/S 模式 下 ,在 客户 端 或 服务 器 程序 中 获取 发 送 的 各 类 信息 ,以 
及 Web 服务 器 的 参数 。 

可 以 说 ,request 对 象 为 jsp 程序 提供 了 数据 处 理 的 “原材料 ”, 没 有 request 对 象 的 
话 ,jsp 程序 就 失去 了 与 客户 端 联系 的 交互 能 力 , 可 以 把 request 对 象 看 做 JSP 的 眼睛 和 
耳 打 。 


2) request 对 象 的 生命 期 


request 对 象 只 是 在 本 次 请 求 中 有 效 , 当 信息 发 送 到 后 ,request 对 象 也 将 消失 。 


3) request 对 象 的 常用 方法 


String getParameter (String name) 


String[] getParameterNames () 


String getSservletPath () 

String getServletName () 

Int getServletPart () 

String getQqureystringPart () 

String setAttribute (String name,Object o) 


// 得 到 客户 端 提交 的 指定 属性 name 的 值 
// 返 回 客户 端 向 服务 器 端 提交 的 所 有 参数 
// 的 名 字 ,为 Enumeration 对 象 
// 得 到 Web 服务 器 中 的 路 径 
// 得 到 Web 服务 器 名 称 
// 得 到 web 服务 器 端口 号 
// 得 到 get 方 法 提交 的 数据 
// 设 置 属性 name 的 值 
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String getAttribute (String name) ”// 得 到 属性 name 的 值 ,如 果 属 性 值 不 存在 ,返回 null 
String[] getAttributeNames ()  // 返 回 request 对 象 所 有 属性 的 名 字 ,为 一 个 字符 串 数组 


Cookie[] getCookies () // 返 回 客户 端的 cookie 对 象 ,结果 为 cookie 数组 
string getMethod () // 返 回 客户 端 向 服务 器 提交 数据 的 方法 名 

String getRemoteHost () // 返 回 客户 端的 机 器 名 

String getRemoteAddr () // 返 回 客户 端的 IP 地 址 

HttpSession getSession () // 返 回 当前 请 求 的 session, 如 果 不 存在 ,新 创建 一 个 


4) 使 用 form 表单 传递 数据 到 JSP 文件 的 方式 

通过 使 用 request 对象 ,不 仅 可 以 获取 从 HTML 文件 中 用 post 方法 或 get 方法 提交 
的 数据 ,还 可 以 访问 任何 用 HTTP 请 求 传递 的 信息 。post 方法 提交 的 数据 是 隐 式 的 , 常 
用 来 提交 信息 量 较 大 、 安 全 性 高 的 信息 ,例如 用 户 的 基本 信息 。get 方法 传递 的 数据 是 显 
式 的 ,在 地 址 栏 中 可 以 看 到 ,一 般 用 来 提交 信息 量 较 少 、 安 全 性 不 高 的 信息 ,例如 查询 字 
符 串 。 

使 用 form 表单 传递 信息 一 般 有 3 种 方式 : 

(1) 由 HTML 网 页 内 的 form 传递 信息 给 其 他 JSP 文件 。 

(2) 由 其 他 JSP 文件 内 的 form 传递 信息 给 另外 一 个 JSP 文件 。 

(3) 由 JSP 文件 内 的 form 传送 信息 给 自身 (默认 设置 ) 。 例 如 可 在 test. jsp 中 由 
form 传递 数据 给 test. jsp 文件 自身 使 用 ,可 使 用 下 面 的 语句 : 


< form method= "post" action= "test .jsp"> 

5) form 表单 标记 人 码 及 其 属性 

< form action= 被 调用 程序 的 url 网 址 enctype= 数 据 传送 的 mime 类 型 name= form 表单 名 称 
method= 提 交 数 据 的 方式 get/post onrest= 按 下 rest 键 所 调用 的 程序 onsubmit= 按 下 sumit 键 所 
调用 的 程序 target= 输 出 信息 的 窗口 或 网 页 的 名 称 > 


< /form> 


5.3.2 发 送 响 应 信息 的 response 对 象 

response 对 象 与 request 对 象 类 似 , 它 是 java. servlet. ServletResponse 类 的 子 类 对 
象 。 在 传输 协议 HTTP 下 的 JSP/Servle 应 用 中 ，response 对 象 作 为 
HttpServletResponse 类 的 一 个 对 象 .其 作用 是 在 C/S 模式 下 ,发 送 各 种 响应 信息 。 

response 对 象 的 常用 方法 如 下 : 

void sendError (int code, String errorMessage) 

// 服 务 器 不 能 响应 请 求 时 ,向 客户 端 发 送出 错 信息 

例如 ,下 面 的 语句 可 以 用 于 当 Web 服务 器 不 能 响应 用 户 请 求 时 ,使 用 状态 代码 向 客 

户 端 返回 的 发 现 错误 代码 及 出 错 信息 : 


<$% response-. sendError (403, "非法 登录 用 户 ");%> 
void sendHeader (String name, String value) // 设 置 HTTP 协 议 文件 头 信 息 
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例如 ,下 面 的 语句 使 JSP 页 面 每 隔 2 秒 自动 刷新 ,常用 于 制作 聊天 室 。 


<$%response.setHeader ("refresh"v"2") 7 多 > 

void addHeader (String name, String value) // 添 加 HrTP 协 议 文 件 头 信息 ,返回 给 客户 端 
void addcookie (Cookie name) // 添 加 cookie 对 象 ,保存 给 客户 端的 用 户 信息 
void sendRedirect (String Location) // 重 新 定向 URL 


5.3.3 输出 结果 信息 的 out 对 和 象 
1. 编写 使 用 out 对 象 的 JSP 文件 


下 面 的 例子 可 由 用 户 输入 一 个 整数 ,该 页 面 程序 会 将 这 个 数 的 0 一 10 次 过 计算 并 显 
示 到 页 面 上 。 

例 5.5 一 个 计算 用 户 输入 整数 寡 的 JSP 文件 (5-5. jsp 文件 ) 。 

<#- -客户 端 html 界面 --%> 


<center> 
< form name= forml method= get action= "5- 5.jsp"> 
显示 < input type=text name=nl> 的 寡 值 
< input type= submit value= "确定 "> <br> 
< /form> 
<%-- 提 交 参 数 n1--%> 
<%String nl= request .getParameter ("n1") 7 多 > 
<s#- -服务 器 端 JsP 获取 信息 并 显示 处 理 结果 --%> 
<%!lint n=2,s=1;%> 
<%if (nl!=null) 
{n= Integer .parseInt (n1); 
s=1; 
}%> 
< font color="red"><%=n%> 的 竹 值 < /font> 
<table border=2> 
<$%-- 绘 制 表格 --#> 
<tr><td> 寡 次 </td><s- -表格 标题 --s><td><s=ngs> 的 罕 值 < /td> < /tr> 
<%for (int i=0; i<=10; i++) { 当 > 
<tr><%s-- 表 格 一 行 -=-%> 
<%-- 第 1 列 寡 值 数 --s><td><s=ig></td> 
<$%-- 第 2 列 计算 结 果 --%><td><%out.print(s); s=sx n;%></td> 
</tr> 
<% }%> 
</table> 


</center> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/5-5. jsp; 在 文本 框 输入 10, 单 击 “ 确 
定 ” 按 钮 ,可 看 到 运行 结果 如 图 5. 26 所 示 。 
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图 5.26 5-5.jsp 运行 结果 


2. 知识 点 归纳 


1) out 对 象 

out 对 象 主要 用 于 向 客户 端 输出 数据 。out 对 象 是 java. servlet. JspWriter 类 的 子 类 
对 象 。out 对 象 主要 应 用 于 java 代码 片段 中 , 它 通 过 JSP 容器 自动 转换 为 java. io. 
PrintWriter 对 象 ,将 JSP 文档 的 输出 信息 发 送 到 客户 端的 浏览 器 上 。 

2) out 对 象 常用 方法 


void print (String s) // 输 出 字符 串 信 息 的 方法 
void printIn (String s) // 换 行 输出 字符 串 信 息 的 方法 


使 用 JSP 表达 式 可 以 直接 输出 表达 式 的 值 ,out 对 象 可 输出 java 代码 片段 运行 的 结 
果 ,out 对 象 比较 灵活 。 

3) 数据 类 型 的 转换 

将 字符 型 数据 转换 为 整数 型 数据 可 使 用 Integer. parselInt(String s) 方 法 。 

4) JSP 代码 和 HTML 代码 混合 使 用 的 方式 

从 本 例 可 以 看 出 ,该 JSP 文件 里 存在 JSP 代码 和 HTML 代码 混合 使 用 的 情况 ,可 在 
HTML 代码 设计 的 表格 标记 中 包含 JSP 代码 ,达到 使 用 HTML 代码 设计 表格 显示 方 
式 、 使 用 JSP 代码 执行 计算 结果 。 二 者 相 结 合 即 可 在 表格 中 显示 JSP 处 理 后 的 计算 
结果 。 
5.3.4 保存 用 户 信息 的 session 对 和 象 

session 对 象 是 在 第 一 次 运行 JSP 页面 时 由 HttpSession 类 自动 创建 的 。session 对 
象 用 来 保存 用 户 信 息 , 以 便 跟 踪 用 户 的 操作 状态 ,对 通过 多 个 页 面 完 成 的 Web 应 用 非常 


有 用 。 
为 说 明 session 对 象 的 具体 应 用 .下 面 使 用 三 个 页 面 文件 组 成 的 Web 应 用 。 
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1. 输入 用 户 姓 名 的 HTML 文件 
例 5.6 创建 一 个 用 来 输入 用 户 姓名 的 静态 页 面 文件 (5-6. htm 文件 ) 。 


<html> 

<head> 

<title> 输 入 信息 页 面 < /title> 

< /head> 

< form method=post action= "5- 6.jsp"> 

输 A 姓名 <input type= "text" name= "yhm"> 
<input type= "submit" value= "提交 " > 

< /form> 

</html> 


2. 创建 保存 用 户 信 息 的 JSP 文件 


例 5.7 创建 5-6. jsp 文件 ,其 功能 之 一 是 通过 request 对 象 提取 5-6. htm 表单 中 的 
yhm 信息 ,将 它 保存 在 name 变量 中 ,然后 将 这 个 name 值 保存 到 session 对 象 中 。 功 能 之 
二 是 输入 "你 喜欢 吃 什 么 ?” 问 题 的 答案 。 


<%Q@page language= "java" %> 

<%!String name=""; %> 

< 多 

name= request .getParameter ("yhm"); 

session.setAttribute ("yhm", name); 

名 > 

你 的 姓名 是 : <%=name%s><p> 

< form method=post action= "5- 7.jsp"> 
你 喜欢 吃 什么 ? 

< input type= "text" name= "food"> < P> 

< input type= "submit" value= "提交 "> 

< /form> 


3. 创建 显示 各 种 信息 的 JSP 文件 


例 5.8 创建 5-7.jsp 文件 , 它 的 主要 任务 是 显示 问答 结果 。 先 通过 session 对 象 提 
取 yhm 的 信息 并 显示 它 : 以 此 说 明 虽 然 该 信息 在 第 一 个 页 面 输入 ,但 通过 session 对 象 得 
以 保留 。5-7.jsp 的 另外 一 个 任务 是 提取 在 5-6. jsp 页 面 中 用 户 根据 问 题 输入 的 答案 。 


<$@page language= "java" $> 

<g$ !String name=""; $> 

<$@page language= "java" $> 

<$ !String foodl="";%> 

去 村 

foodl= request .getParameter ("food"); 
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String namel= (String) session.getAttribute ("yhm"); 

名 > 

你 的 姓名 是 : <$=namel%> 

<P> 你 喜欢 吃 : << 当 =food1$g > 

在 浏览 器 中 输入 http://localhost:8080/myjsp/5-6. htm, 运 行 结果 如 图 5. 27 所 示 ， 
输入 一 个 姓名 ,例如 shlp 后 单 击 “ 提 交 ” 按 钮 ,可 看 到 图 5. 28 所 示 页 面 , 如 果 在 文本 框 输 
和 人 “葡萄 ”后 单 击 “提交 ”按钮 ,可 看 到 图 5. 29 所 示 页 面 。 
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图 5.27 输入 姓名 


你 的 姓名 是 ， shlp 


你 喜欢 吃 什么 ? | 区 者 
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图 5.28 输入 喜欢 的 食物 


知识 点 归纳 


1) 使 用 session 对 象 保存 用 户 信 息 的 方法 

在 例 5. 8 中 通过 setAttribute ("变量 名 ", 变量 值 ) 方 法 定义 了 session 类 型 的 变量 
yhm ,通过 getAttribute ("变量 名 ") 方 法 获取 yhm 变量 。session 类 型 的 变量 yhm 用 来 
保存 用 户 输 入 的 用 户 名 变量 name。 

2) session 变量 的 特点 

session 变量 是 由 session 对 象 专门 创建 的 用 于 保存 客户 端 信息 而 分 配给 用 户 的 变 
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图 5.29 显示 输入 的 信息 


量 , 是 用 户 的 私有 变量 ,每 个 上 网 的 用 户 都 有 但 各 不 相同 。 当 用 户 第 一 次 在 浏览 器 上 访问 
Web 服务 器 发 布 目录 下 的 JSP 网 页 时 ,Web 服务 器 会 自动 创建 一 个 session 对 象 ,并 分 配 
唯一 的 ID 号 。session 类 型 变量 保存 在 服务 器 端 ,ID 号 保存 在 客户 端的 Cookie 中 。 
一 个 客户 端 可 以 有 多 个 不 同 session 对 象 的 ID 号 ,ID 号 和 Web 服务 器 的 session 对 
象 相对 应 。 由 于 session 对 象 在 会 话 期 间 是 一 直 有 效 的 ,因此 session 对 象 保存 的 变量 对 
其 他 页 面 也 有 效 。 用 户 可 以 将 需要 传递 的 一 些 信息 保存 到 Session 对 象 中 ,以 便 在 访问 
其 他 页 面 时 使 用 这 些 信 息 。 
3) session 对 象 具有 生命 周期 
session 对 象 的 生命 开始 于 服务 器 为 某 个 用 户 建立 session 对 象 , 它 的 生命 结束 于 服 
务 器 所 内 定 的 或 设置 的 时 间 期 限 。 例 如 ,Tomcat 系统 默认 时 间 为 30 分 钟 ,如 果 用 户 在 
生成 session 之 后 ,超过 这 个 时 间 而 没有 向 服务 器 发 出 进一步 的 请 求 , 就 会 自动 被 服务 
器 从 系统 中 清除 。 如 果 页 面 需 要 登录 才能 使 用 ,用 户 需要 重新 登录 才能 向 服务 器 发 出 
请 求 。 
4) session 对 象 的 常用 方法 
。 boolean isNew() 一 一 判断 session 对 象 是 否 是 新 创建 的 对 象 。 
。 Void setMaxJInactiveInterval (int k) 一 一 设置 session 的 生命 周期 。k 的 单位 为 
秒 。 如 果 时 间 超 过 该 时 间 ,将 不 能 再 对 该 session 进行 任何 操作 。 
。 void putValue/setAttribute(String name, Object value) 一 一 定义 名 称 为 name， 
值 为 value 的 session 变量 。 
。 long getCreationTime() 一 一 返回 session 的 创建 时 间 。 
。 long getLastAccessedTime() 一 一 返回 当前 session 最 后 一 次 被 访问 的 时 间 。 
。 String getId() 一 一 取得 session 的 ID 号 , 它 是 服务 器 创建 该 session 时 分 配 的 ,是 
唯一 的 。 
。 String getValue/getAttribute (String name) 一 一 取得 session 类 型 变量 的 值 。 
如 果 参 数 name 在 当前 session 中 不 存在 , 则 返回 null。 
。 getAttributeNames() 一 一 用 于 获取 session 对 象 中 存储 的 每 一 个 属性 对 象 , 结 果 
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返回 为 一 个 Enumeration 类 对 象 。 


。 removeAttribute(String name) 


用 于 删除 名 称 为 name 的 属性 对 象 。 
。 Void invalidate() 一 一 设置 当前 session 无 效 , 其 后 不 能 访问 该 对 象 。 


5.3.5 保存 公共 信息 的 application 对 和 象 


一 个 Web 应 用 通常 由 多 个 HMTL 文件 JSP 文件 .JavaBean 数据 库 文件 等 资源 共 
同 组 成 , 当 Tomcat 启动 时 ,JSP 容器 会 自动 创建 一 个 application 对 象 ,保存 与 Web 应 用 
有 关 的 Web 服务 器 名 、JSP 容器 等 信息 。application 对 象 一 旦 创建 , 它 将 一 直 存 在 ,直到 
Web 服务 器 关闭 。 因 此 ,application 对 象 可 以 实现 Web 应 用 中 多 个 用 户 间 的 数据 共享 ， 
好 像 Web 应 用 的 公共 变量 一 样 。 


1. 创建 Web 应 用 的 第 一 个 页 面 
例 5.9 利用 application 对 象 获得 服务 器 端 信息 的 JSP 文件 (5-8. jsp)。 


<% 
out.println ("JSP 容器 :"+ application.getServerInfo()+"<br>"); 
String filename= request .getServletPath (); // 获 得 本 文档 名 
out .Println ("JSP 文档 :"+ application.getRealPath (filename)+ "<br>"); 


String s= (String)application.getAttribute ("count"); 
if (s==nul1) // 设 置 application 的 count 属性 值 为 1 
{application.setAttribute ("count", "1"); 


out.printin ("欢迎 你 ! 你 是 本 网 站 第 "+ 1+" 位 访问 者 。<br><br>"); 
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{s= (Integer.pParseInt (s)+1)+""; 


application.setAttribute ("count",s); 


out.println(" 欢 迎 你 ! 你 是 本 网 站 第 "+ s+" 位 访问 者 。<br><br>"); 


String id= session.getId(); 
out.println("session 的 ID 号 :"+id+" "+"<br>"); 
if (session.isNew()) 
{fout .println ("该 session 是 新 创建 的 。"+ "<br>");} 
int k=360007 
session.setMaxInactiveInterval (k); 
long n= session.getCreationTime (); 
out .println ("创建 时 间 :"+ (new java.util.Date(n)) .tostring()+"<br>"); 
long m= session.getLastAccessedTime (); 
out.printin ("访问 时 间 :"+ (new java.util.Date (m)) .tostring()+"<br>"); 
session.setAttribute ("number™", "1"); // 设 置 session 的 number 属性 值 为 1 
out.println(" 这 是 第 1 页 。<br>"); 
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名 > 
<a href="5- 9.jsp"> 下 一 页 </a> 


2. 创建 Web 应 用 的 第 二 个 页 面 
例 5.10 利用 application 对 象 获得 服务 器 端 信息 的 JSP 文件 (5-9. jsp): 


<% 
out.println ("JSP 容器 :"+ application.getServerIinfo()+"<br>"); 
String filename= request .getServletPath (); // 获 得 本 文档 名 
out.println ("JSP 文档 :"+ application.getRealPath (filename)+"<br> "); 
String s= (String)application.getAttribute ("count"); 
out.printin(" 你 好 ! 你 是 第 "+ s+" 位 访问 者 。<br><br>"); 


String id= session.getId(); 
out.println("session 的 ID 号 : "+id+" "+"<br>"); 
String nb= (String) session.getAttribute ("number"); 
if (nb==null) 

{session.setAttribute ("number™", "1");} 
else 

{nb= (Integer .parseInt (nb)+1)+""; 

session.setAttribute ("number",nb);} 
out.println (" 这 是 第 "+nb+" 页 。<br>")7 
session.invalidate ()7 // 设 置 当前 session 无 效 
名 > 


在 浏览 器 中 输入 http://localhost:8080/myjsp/5-8.jsp, 运 行 结 果 如 图 5. 30 所 示 , 单 
击 “ 下 一 页 " 超 链 接 , 可 看 到 如 图 5. 31 所 示 页 面 .根据 浏 览 次 数 不 同 ,其 中 的 数字 会 改变 。 
这 里 其 实 创 建 了 一 个 计数 器 ,用 来 显示 用 户 浏 览 页 面 的 次 数 。 


诈 http://localhost:8080 -8jsp - Windows Internet Explorer | 


OB hocahostsr - “+ [x | Google = 


;文件 旧 ”编辑 (E) ”各 看 QD 收藏 只 入 ”工具 中。 帮助 (中 
帘 喧 国 httpy/localhost:8080/.. jm -时 


JSP 容 器 : Apache Tomcat/6.0.14 
JSP 文 档 : C:\Tomcat 6. 0\webapps\ROOT\myjsp\5-8. jsp 
欢迎 你 ! 你 是 本 网 站 第 1 位 访问 者 。 


session 的 ID 号 : 0FD6693C7EF6F157378704911323218B 
该 session 是 新 创建 的 。 

创建 时 间 : Jon Apr 21 23:02:34 CST 2008 

访问 时 间 : Mon Apr 21 23:02:34 CST 2008 

这 是 第 1 页 。 


完 6 千本 地 Intranet | 保护 模式 : 启用 臣 100% ~ 


图 5. 30 Web 应 用 的 第 1 页 
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帮 httpWlocalhost8080/myjsp/5-5jsp - Windows Internet Explorer ”le EE 


OO- 国 httpyilocalhostst ~ | 生 | x | Google a 
;文件 昌 ”编辑 中 吾 看 (WD 收藏 只 凡 ” 工 具 中 ”帮助 (H 
穿 = 窑 | 国 httpy/localhost:8080/.. Es 


JSP 容 器 : Apache Tomcat/6.0.14 
JSP 文 档 : C:\Tomcat 6.0\webapps\ROOT\myjsp\5-9. jsp 
你 好 ! 你 是 第 1 位 访问 者 。 


session 的 ID 号 : 0FD6693C7EF6F157378704911323218B 
这 是 第 2 页 
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图 5.31 Web 应 用 的 第 2 页 


3. 知识 点 归纳 


1) application 对 象 和 Session 对 象 的 区 别 
application 对 象 保 存 的 是 不 同 用 户 之 间 共 用 的 数据 变量 ,所 以 不 同 用 户 都 可 以 读 取 
到 application 对 象 的 变量 值 。 而 Session 对 象 存 储 的 是 不 同 用 户 的 私有 数据 ,服务 器 端 
为 每 个 session 都 要 附加 上 ID 识别 码 , 所 以 Session 是 私有 的 ,只 属于 个 别 用 户 。 
从 例 5.9 与 5. 10 可 以 看 到 使 用 application 对 象 设置 count 属性 保存 用 户 第 几 次 访 
问 该 网 页 ,使 用 Session 对 象 设置 number 属性 值 保存 当前 访问 的 是 Web 应 用 的 第 几 页 。 
2) application 的 生命 期 
Application 对 象 从 Web 服务 器 启动 开始 生成 ,到 Web 服务 器 关闭 消失 。 
3) application 对 象 的 常用 方法 
。 String getRealPath () 一 一 返回 filename 文件 所 在 的 绝对 路 径 。 
。 void setAttribute (String name,String value ) 一 一 设置 名 称 为 name 值 为 value 
的 application 类 型 变量 。 
。 String getServletInfo() 一 一 返回 当前 使 用 的 Web 服务 器 (Servlet 编译 器 ) 及 版 本 
号 信息 。 
。 Object getAttribute (String name) 取得 application 类 型 变量 的 值 。 
。 getAttributeNames() 一 一 用 于 获取 application 对 象 中 存储 的 每 一 个 属性 对 象 ， 
结果 返回 为 一 个 Enumeration 类 对 象 。 
其 他 内 部 对 象 还 有 Exception、PageContext、Config、Page 等 。 


5.4 JSP 的 动作 标记 


在 JSP 文件 中 ,还 可 以 包含 JSP 动作 标记 。 使 用 JSP 动作 标记 可 以 动态 地 插入 其 他 网 
页 文件 .重用 JavaBean 组 件 、. 把 用 户 重 定向 到 另外 的 页 面 ,为 Java 插件 生成 HTML 代码 等 。 
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本 节 的 内 容 主 要 介绍 JSP 动作 标记 jsp: include、 jsp: forward、jsp: plugin、 jsp: 
useBean 等 的 使 用 方式 。 


5.4.1 jsp:include 动作 标记 
1. 语法 格式 


jsp:include 动作 标记 可 以 把 指定 文件 插入 到 正在 生成 的 JSP 页 面 文件 中 。 
其 语法 格式 如 下 : 
<jsp:include page= "relative URL" flush= "true"/> 


<jsp:param name= "属性 名 " value= "属性 值 "/> 
</jsp:include> 


例如 : 


<jsp:include page= "news/newl.html" flush= "true"/> 
<jsp:include page= "news/new2.html" flush= "true"/> 


<jsp:include page= "news/new3.jsp" flush= "true"/> 


其 中 ,page 属性 说 明文 件 的 相对 URI 地 址 ,flush 是 否 立 即 刷 新 缓存 。 引 入 文件 时 可 
通过 二 jsp :param 二 子 标记 同时 引入 属性 变量 。 


2. 路 径 的 写法 


在 JSP 中 将 使 用 相对 RUL 规范 , 即 相 对 路 径 。 它 分 两 种 类 型 ; 

1) 相对 路 径 

不 以 和 斜 杠 /开头 的 路 径 , 例 如 “news/newl. html”。“.. /new. jsp” 表 示 new. jsp 存 
放 在 相对 当前 页 面 的 上 一 层 路 径 , “news/new2. html” 表 示 new2. html 存放 在 相对 当前 
页 面 的 下 一 层 路 径 news 中 。 

2) 绝对 路 径 

以 和 斜 杠 “/ ”开头 的 路 径 , 例 如 "/WZKF/myjsp/news/newl. html”。newl. html 相对 
它 的 ServletContext 对 象 提供 的 根 路 径 。 它 以 某 个 Web 服务 RUL 路 径 ( 虚 拟 目 录 的 根 
目录 ,下 节 人 介绍) 开始 。 

注意 : 文件 系统 目录 中 的 斜 杠 为 "\”。 例 如 “C:Tomecat 6.0”。 


3. jsp:include 动作 与 include 指令 


1) 引入 时 间 

include 指令 语句 ,在 JSP 文件 被 转换 成 Servlet 类 文件 (. class 文件 ) 时 引入 被 包含 
文件 的 , 仅 在 JSP 文件 更 新 编译 时 才 会 再 次 更 新 被 包含 的 文件 。jsp:include 动作 在 JSP 
文件 被 请 求 时 引入 被 包含 文件 。 

2) 引入 文件 类 型 

include 指令 语句 可 以 引入 HTML JSP 等 类 型 的 文件 。include 指令 在 编译 时 将 引 
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入 的 文件 一 起 解释 执行 。jsp:include 动作 只 处 理 后 缀 名 为 .jsp 的 文件 ,其 他 类 型 文件 原 
样 输出 交 浏 览 器 解释 。 

3) 特点 

jsp:include 动作 标记 引入 文件 的 时 间 决 定 了 它 的 运行 效率 要 稍微 差 一 点 ,而 且 被 引 
入 的 文件 不 能 包含 某 些 JSP 代码 (例如 不 能 设置 HTTP 头 ), 但 动态 性 好 ,能 在 每 次 JSP 
文件 被 请 求 时 更 新 其 内 容 。 所 以 ,如 果 引 入 文件 的 内 容 经 常 要 变 可 使 jsp:include 动作 。 
文件 内 容 基 本 不 变 可 用 include 指令 来 引入 。 


5.4.2 jsp:forward 动作 标记 


jsp:forward 动作 标记 可 从 一 个 JSP 文件 向 另 一 个 文件 传递 一 个 包含 用 户 请 求 的 
request 对 象 。jsp:forward 标记 只 有 一 个 属性 page。page 属性 说 明 相对 的 URL。page 
的 值 既 可 以 直接 给 出 ,也 可 以 在 请 求 的 时 候 动 态 计 算 , 其 语法 格式 如 下 所 示 。 

<jsp:forward page= "relative URL" flush= "true"/> 

<jsp:param name= "属性 名 " value= "属性 值 "/> 


< /jsp:forward> 
例如 : 


< jsp:forward page= "/myjsp/5-1.jsp"/> 或 <jsp:forward page= "< 一 = 表达 式 % 二 "/> 
<jsp:param name= "username" value= "1p"/> 


< /jsp:forward> 


通过 二 jsp: param 二 子 标记 向 目标 文件 (5-1. jsp) 传 送 了 参数 和 值 ,参数 名 为 
username, 值 为 ljp。 


5.4.3 jsp:plugin 动作 标记 


jsp:plugin 动作 标记 用 来 根据 浏览 器 的 类 型 .插入 Java Applet 与 JavaBean 。 
例如 ,下 面 的 语句 可 在 ISP 页 面 上 插入 一 个 Java Applet 类 Hello. class。 


<jsp:plugin type= "applet" code= "Hello.class" height= "40" width= "320" > 
<jsp:params> // 指 定 applet 的 参数 
<jsp:param name=bgcolor value= "ffffcc"/> 
<jsp:param name= fgcolor value= "ff0000"/> 
</jsp:params> 
<!-- 如 果 无 法 载 人 Applet 时 显示 的 信息 --> 
<jsp:fallback> 无 法 加 载 applet< /jsp:fallback> 


</jsp:plugin> 
当 JSP 文件 被 编译 后 , 送 往 浏 览 器 时 .一 jsp:plugin 二 标记 将 会 根据 浏览 器 的 版 本 替 
换 成 二 object 二 或 者 二 embed 二 元 素 。 
ja42 . 


5.4.4 jsp:JavaBean 动作 标记 
1. 什么 是 JavaBean 


JavaBean 是 基于 Java 的 组 件 技术 , 它 提 供 了 创建 和 使 用 以 组 件 形式 出 现 的 Java 类 
的 方法 。 编 写 JavaBean 的 目的 是 为 了 重复 使 用 。JSP 对 于 在 Web 用 中 集成 的 JavaBean 
组 件 提供 了 完善 的 支持 。 这 种 支持 不 仅 能 缩短 开发 时 间 ( 可 以 直接 利用 经 测试 和 可 信任 
的 已 有 组 件 ,避免 重复 开发 ) ,也 为 Web 应 用 带 来 了 更 多 的 功能 ,例如 ,JavaBean 可 以 帮 
助 JSP 执行 复杂 的 计算 任务 .负责 与 数据 库 进行 交互 以 及 提取 数据 等 。 


2. 创建 JavaBean 的 步骤 


1) 编写 JavaBean 源 程 序 (TaxRate. java 文件 ) 

例 5.11 使 用 Java 语言 创建 一 个 名 称 TaxRate 的 JavaBean。 它 具有 两 个 变量 : 
Product( 产 品 ) 和 Rate( 税 率 ) 。 两 个 set 方法 分 别 用 来 设置 这 两 个 变量 ,两 个 get 方法 用 
于 提取 这 两 个 变量 的 值 。 在 实际 应 用 中 ,这 种 JavaBean 一 般 应 当 从 数据 库 提取 税率 值 ， 
此 处 简化 了 这 个 过 程 ,允许 任意 设 定 税率 。 

使 用 Java 语言 编写 的 JavaBean(TaxRate. java 文件 ) 代 码 如 下 : 


package tax; 


public class TaxRate { // 创 建 TaxRate 类 
String Product; // 声 明 Product 变量 
double Rate; // 声 明 Rate 变量 
public TaxRate () { // 不 带 参 数 的 构造 方法 


this.Product= "AO01"; 

this.Rate= 57 

} 

public void setProduct (String ProductName) { // 设 置 Product 值 的 方法 
this.Product= ProductName; 

} 

public String getProduct () { // 获 取 Product 值 的 方法 
return (this.Product) 7 

} 

public void setRate (double rateValue) { // 设 置 Rate 值 的 方法 
this.Rate= rateValue; 

} 

public double getRate () { // 获 取 Rate 值 的 方法 
return (this.Rate); 

} 

} 


这 是 一 个 Java 源 程 序 , 它 定义 了 一 个 tax 包 , 在 包 中 定义 了 TaxRate 类 及 其 变量 和 
方法 , 它 没有 main() 方 法 。 这 种 Java 类 称 为 JavaBean。 
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一 个 标准 的 JavaBean 具有 以 下 三 个 特点 : 
。 JavaBean 是 一 个 公共 (public) 类 ，; 
。 JavaBean 有 一 个 不 带 参 数 的 构造 方法 ; 
。 JavaBean 具有 setXXX() 方 法 可 以 设置 变量 的 值 ,同时 具有 getXXX() 方 法 可 以 
获取 变量 的 值 。 
2) 编译 生成 字 节 码 文 件 的 JavaBean(TaxRate. class) 
将 TaxRate. java 源 程序 编译 为 TaxRate. class 字 节 码 文 件 。 如 果 没 有 其 他 编译 环 
境 , 可 参考 以 下 编译 方法 : 
(1) 首先 确定 Windows 系统 中 的 环境 变量 Path 与 classpath 为 C:\sdk\jdk\bin;( 根 
据 JDK 保存 的 路 径 进 行 设置 ) ,以 保证 可 以 对 Java 源 程序 进行 编译 。 
(2) 在 命令 提示 符 窗口 或 MS-DOS 窗口 进入 TaxRate. java 程序 所 在 目录 。 
(3) 输入 编译 器 文件 名 和 要 编译 的 源 程序 文件 名 “javac TaxRate. java”, 按 Enter 键 
即 开始 编译 (注意 : 文件 名 中 大 小 写 不 能 错 , 否 则 运行 会 出 问题 )。 
如 果 源 程序 没有 错误 , 则 屏幕 上 没有 输出 ,可 输入 dir 按 Enter 键 后 可 在 日 录 中 看 到 
生成 了 一 个 同名 字 的 . class 文件 TaxRate. class, 否 则 将 显示 出 错 信息 。 
3) 保存 JavaBean(TaxRate. class) 
将 编译 后 的 TaxRate. class 文件 放 在 C:\Tomcat 6. 0\webapps\ROOT\WEB-INF\ 
classesNtax 目录 下 , WEB-INF\classes 是 专门 存放 JavaBean 的 子 目 录 ,tax 是 存放 
TaxRate. class 的 子 目 录 。 


3. 在 JSP 中 使 用 JavaBean 
例 5.12 编写 使 用 名 称 为 TaxRate 的 JavaBean 的 JSP 文件 (TaxRate. jsp) ,代码 如 下 : 


<html> 

<%@page language= "java"® > 

<h4> 应 用 JavaBean 的 JsP 页 面 </h4> 

<jsp:useBean id= "taxbean" scope= "application" class= "tax.TaxRate" /> 
初始 设置 的 产品 号 与 税率 <br> 

产品 : <%=taxbean.getProduct ()%><br> 

税率 : <%=taxbean.getRate()%> 

<P> 重 新 设置 产品 与 税率 值 <br> 

产品 : A002< % taxbean.setProduct ("R002") ;%><br> 

税率 : 17<% taxbean.setRate(17);%$><p> 


显示 新 设置 的 产品 与 税率 的 值 <br> 

产品 : <%=taxbean.getProduct ()%><br> 
税率 : <%=taxbean.getRate()%> 
</html> 


在 浏览 器 中 输入 http://localhost: 8080/myjsp/TaxRate. jsp, 运行 结果 如 图 5. 32 
所 示 。 
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应 用 JavaBean 的 JSP 页 面 
初 治 设 置 的 产品 号 与 税 时 
产品 : ot 

税率 : 


重新 设置 六 品 与 税率 值 


图 5. 32 TaxRate. jsp 运行 结果 


可 以 看 到 在 TaxRate. jsp 页 面 中 通过 TaxRate 的 set 和 get 方法 重新 设置 并 显示 了 
变量 的 值 。 该 例 没 有 什么 实际 意义 ,只 是 让 读者 了 解 如 何 创 建 和 使 用 JavaBean。 


4. 知识 点 归纳 


1) 声明 并 创建 JavaBean 的 对 象 

通过 二 jsp:useBean 二 动作 标记 可 以 在 JSP 页 面 中 声明 并 创建 一 个 JavaBean 的 对 
象 。 这 个 功能 非常 有 用 ,因为 它 既 可 以 继承 Java 组 件 重用 的 优势 ,又 可 以 发 挥 JSP 的 方 
便 性 。 

jsp:useBean 动作 标记 的 语法 格式 为 : 


<jsp:useBean id= "name" class= "package.class" scope= "scope"/> 


它 表 示 由 二 jsp:useBean 二 创建 了 一 个 由 class 属性 指定 的 类 的 实例 对 象 ,并 由 id 属 
性 给 出 实例 对 象 名 ,由 scope 属性 给 出 JavaBean 的 使 用 范围 。 例 如 下 面 的 语句 : 


<jsp:useBean id= "taxbean" class= "tax.TaxRate" scope= "application" /> 


定义 了 一 个 tax 包 中 的 TaxRate 类 的 JavaBean 对 象 ,其 名 为 "taxbean "。 

范围 属性 scope 确定 JavaBean 的 使 用 范围 ,有 4 种 参数 。application 表示 JavaBean 
的 使 用 范围 为 整个 应 用 程序 。page 表示 JavaBean 的 使 用 范围 是 当前 页 面 ,scope 的 默认 
值 就 是 page, 表 示 该 JavaBean 只 在 当前 页 面 内 可 用 。request 表示 JavaBean 的 使 用 范围 
为 一 个 被 请 求 的 网 页 。session 表示 JavaBean 的 使 用 范围 为 session 变量 内 。 

2) 调用 JavaBean 的 变量 与 方法 

在 JSP 文件 中 通过 JavaBean 的 对 象 名 可 以 直接 调用 JavaBean 对 象 的 变量 与 方法 。 

例如 ,通过 taxbean 可 以 使 用 TaxRate 对 象 的 方法 getProduct() 得 到 产品 的 编号 , 参 
见 下 面 的 语句 : 


<$=taxbean.getProduct ()$> 
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3) 更 改 JavaBean 变量 的 值 
在 JSP 文件 中 可 以 直接 更 改 JavaBean 中 变量 的 值 ,例如 可 使 用 TaxRate 对 象 的 
setProduct( 参 数 ) 方 法 来 更 改 TaxRate 对 象 的 Product 变量 的 值 , 参 见 下 面 的 语句 : 


<%taxbean.setProduct ("RO02") 7 名 > 


4) 存放 JavaBean 的 位 置 

为 了 要 让 网 络 服务 器 可 以 找到 JavaBean, 需 要 将 JavaBean 的 类 文件 放 在 特别 位 置 。 
一 般 将 JavaBean 的 类 文件 存放 在 指定 的 JavaBean 包 (c:\Tomcat 6.0\webapps\ROOT\ 
WEB-INFNclasses\ 包 名 ) 目 录 下 。 


5.4.5 jsp:setProperty 与 jsp:getProperty 动作 标记 


一 jsp:setProperty 二 动作 标记 用 来 设置 实例 化 的 JavaBean 对 象 的 属性 ,在 二 jsp: 
useBean 之 标记 出 现 后 使 用 。 例 如 : 

<jsp:useBean id= "taxbean" scope= "application" class= "tax.TaxRate" > 

<jsp:setProperty name= "taxbean" property= "Product" value= "A003"> 

<jsp:setProperty name= "taxbean" property= "Rate" value= "13"> 

jsp:getProperty 动作 标记 表示 先 提取 JavaBean 对 象 属性 的 值 ,然后 转换 成 字符 串 在 
JSP 页 面 中 输出 。 

例如 : 


<jsp:getProperty name= "taxbean" property= "Product"> 
<jsp:getProperty name= "taxbean" property= "Rate"> 


它们 都 有 两 个 属性 ,name 为 实例 化 的 JavaBean 对 象 的 名 字 ;property 为 JavaBean 
对 象 的 属性 名 。 


5.5 创建 虚拟 目录 


上 面 介绍 的 JSP 文件 都 是 保存 在 Tomcat 根 目录 ROOT 下 的 ,浏览 器 能 够 正常 运行 
这 些 JSP 文件 。 如 果 将 JSP 文件 保存 在 其 他 文件 夹 中 浏览 器 是 否 能 正常 运行 它们 呢 ? 

本 节 的 内 容 主 要 解决 如 何在 虚拟 目录 下 运行 保存 在 其 他 文件 夹 中 的 JSP 文件 的 
问题 。 
5.5.1 虚拟 目录 、 根 目录 与 物理 目录 

1. 根 目 录 ( 或 称 主 目录 ) 

启动 Tomcat 服务 器 后 ,Tomcat 服务 器 就 可 以 对 用 户 浏 览 器 提交 的 网 页 浏览 请 求 做 
出 响应 。 为 了 使 Tomcat 服务 器 实现 这 种 响应 ,需要 将 发 布 的 文件 保存 在 站 点 的 根 目 录 
或 该 目录 的 子 文件 夹 中 。 

la46 。 


Tomcat 默认 站 点 的 路 径 为 “C:\Tomcat 6. 0\webapps\ROOT”, 该 路 径 称 为 Tomcat 
的 根 目 录 。 在 浏览 器 中 输入 网 址 : http://localhost: 8080/ 文 件 夹 / 文 件 名 , 即 可 访问 
“C:\Tomcat 6. 0\webapps\ROOT\ 文 件 夹 ” 中 相应 的 文件 ,例如 ,http://localhost:8080/ 
myjsp/5-1. jsp。 


2. 物理 目录 


在 计算 机 或 存储 器 中 存放 文件 的 文件 管理 系统 的 路 径 称 为 物理 目录 。 例 如 ,可 设置 
“C:\wzkf” 物 理 目 录 , 将 编写 的 网 页 文件 都 保存 在 这 里 。 


3. 虚拟 目录 
虚拟 目录 是 指 在 计算 机 中 不 存在 的 路 径 。 但 Tomcat 却 将 其 视 为 根 目 录 。 
4. 别名 


别名 是 虚拟 根 目录 对 应 物理 目录 的 名 称 ,Tomcat 服务 器 通过 别名 运行 物理 目录 下 
的 网 页 文件 。 别 名 可 与 物理 文件 夹 同 名 ,也 可 不 同 。 为 了 方便 输入 网 址 ,别名 一 般 比 真实 
文件 夹 名 短 。 例 如 ,“C:\wzkf” 文 件 夹 名 ,可 用 jsp 作为 别名 。 这 样 可 以 增加 程序 的 安全 
性 ,使 外 人 不 容易 发 现 文件 所 在 的 物理 目录 。 


5.5.2 通过 Tomcat 管理 器 创建 虚拟 目录 


首先 创建 物理 目录 C:/WZKF。 

创建 虚拟 目录 可 以 参考 以 下 操作 步骤 : 

(1) 在 Windows 界面 单 击 “开始 ”一 “所 有 程序 ”> Apache Tomcat 6. 0 一 Tomcat 
Manager 命令 ,打开 如 图 5. 33 所 示 窗 口 。 ey [cI ma 


(2) 输入 用 户 名 ,这 是 安装 Tomcat 时 确定 的 ， 上 
默认 名 称 为 admin, 如 果 输 入 了 口令 还 需要 输入 口 > 


令 , 本 书 根据 安装 时 定义 口令 为 空 , 单 击 “ 确 定 ” 按 sation 的 服务 器 


人 


omcat an 


钮 ,打开 如 图 5. 34 所 示 窗 口 。 ee 
(3) 在 Deploy 栏 下 的 Context Path 文本 框 输 A 
入 虚拟 目录 名 称 /jsp, 如 图 5. 35 所 示 窗 口 。 es lpshad -| | 


(4) 在 WAR or Directory URL 文本 框 输入 物 
理 目 录 路 径 /D:\WZKF, 如 图 5. 35 所 示 窗 口 。 

(5) 单 击 Deploy 按钮 ,可 看 到 如 图 5. 36 所 示 
的 虚拟 目录 信息 。 一 个 是 创建 成 功 的 OK 信息 ,一 
个 是 在 Applications 栏 下 虚拟 目录 的 显示 ,在 其 右 图 5.33 Tomcat 管理 器 登录 窗口 
边 单 击 Undeploy 超 链 接 , 可 以 清除 所 创建 的 虚拟 
目录 。 

(6) 将 5-1.jsp 文件 存放 在 C:\WZKF\myjsp 路 径 下 ,在 浏览 器 地 址 栏 输入 http:// 
localhost:8080/Vjsp/myjsp/5-1.jsp, 按 Enter 键 后 将 看 到 如 图 5. 37 所 示 页 面 。 
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图 5.37 通过 虚拟 目录 运行 的 jsp 文件 


5.5.3 通过 server. xml 文件 创建 虚拟 目录 
通过 server. xml 文件 创建 虚拟 目录 可 参考 如 下 操作 步骤 : 


(1) 在 资源 管理 器 中 Tomcat 6.0 目录 下 的 conf 文件 夹 中 ,找到 server. 


图 5. 38 所 示 。 


xml 文件 ,如 


(2) 在 网 页 编辑 器 中 打开 server. xml 文件 ,在 二 host 二 二 /host 二 标记 之 间 加 入 如 下 


Context 标记 对 ,如 图 5. 39 所 示 。 


< Context path="/lp" docBase= 


(3) 重启 tomcat 服务 器 即 可 通过 虚拟 目录 运行 JSP 文件 。 


注意 : 


"c:\1p" debug= "0" reloadable= "true"> < /Context> 


(1) 通过 server. xml 文件 创建 的 虚拟 目录 ,只 能 通过 server. xml 文件 删除 。 


. 148 全 


rn » SWPreload (C3 » Tomcat 6.0 


Deatalina.policy 
Dcatalina.properties 
加 context 
Dlogging.properties 
server 

国 tomcat-users 

国 web 


» conf 


2007/7/20 10:20 
200777720 10:20 
2007/7/20 10:20 
2007/7/20 10:20 
2008/4/21 15:52 
2008/4/22 9:31 

2007/7/20 10:20 


类 型 

POUCY 文件 
PROPERTIES 文件 
XML 文档 
PROPERTIES 文件 
XML 文档 

XML 文档 

XML 文档 


Server XML 文档 修改 日 期 : 2008/4/21 15:52 


图 5. 38 


区 名 人 光 加 | 半 轿 妃 X| 虽 性 |y 好 轿 


大 小 5.62 KB 


server. xml 文件 存放 路 径 


[THD MAE BW Mm) MD) 工程 D) 工具 D 二 DO 和 -lx 


| Blr rurF@lm, HIYS 


有 A| 闭 [二 | 灌 只 | 回 


-> 
<Host nane="localhost” 
‘unpackWARs=" true’ 


鲁 cx 

岛 Tomcat 60 
webapps 
包 RooT 


外 yjsp 


<Context path="/1p” do 


是 二 
--> 
<!-- Access log proc: 


<1- 
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cBase="c: \lp" 
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<Valve className="org. apache.catalina. valves. AccessLogValve” directory="logs", 


prefix="localhost_access_log.” suffix=".txt” pattern="conmon” 
resolveHosts="false"/> 


debug="0" 


xmlValidation="false” xmlNanespaceAvare="false"> 
reloadable="true"> </Context> 


- SinglesignOn valve, share authentication between Web applications 
Documentation at: /docs/config/valve.hral --> 


<Valve className="org. apache.catalina.authenticator. SinglesigmOn” /> 


/docs/config/valve.hral --> | 


图 5. 39 添加 Context 标记 对 


| 行 115| 列 9| 


132[3c [ PC 


(2) 如 果 在 连接 数据 库 时 使 用 的 是 物理 地 址 ,需要 通过 server. xml 文件 来 设置 虚拟 


目录 。 


5.6 思考 与 练习 


思考 题 


5-1 JSP 由 哪些 基本 元 素 构 成 ? 
5-2 JSP 有 哪些 常用 的 内 置 对 象 ? 


ma5o0 。 


二 | 


5-3 JSP 有 哪些 动作 标记 ? 
5-4 JSP 与 Java 存在 什么 关系 ? 
5-5 JavaBean 有 什么 作用 ? 


5.6.2 上 机 练习 


5-1 下 载 安 装 SDK, 并 设置 Windows 2000/XP 环境 中 的 “环境 变量 ”path 与 
classpath, 其 变量 值 都 为 “C:\sdk\jdk\bin;”, 设 置 完成 后 ,在 Windows 2000/XP 环境 下 
选择 “开始 ”>“ 所 有 程序 ”>“ 附 件 ” 一 “命令 提示 符 " 命 令 , 打 开 DOS 窗口 ,在 命令 提示 符 
下 输入 java 或 javac, 按 Enter 键 后 ,如 果 出 现 其 用 法 参数 提示 信息 , 则 安装 正确 。 

5-2 编译 一 个 Java 程序 Hello. java, 代 码 如 下 : 


public class Hello { 

public static void main (String args[]) { 
System.out.println (" 欢 迎 你 学 习 Java 语 言 !"); 

} 

} 


将 Hello. java 保存 在 “C:\java\ 程 序 二 ”目录 下 ,打开 Windows 的 “命令 提示 符 窗 
口 ”, 进 入 “*C:;\java\ 程 序 二 ”目录 下 ,输入 javac Hello. java, 按 Enter 键 。 

看 当前 目录 下 是 否 有 编译 好 的 Hello. class 字 节 码 文 件 。 

5-3 下载 与 安装 Tomcat, 设 置 JSP 运行 环境 。 创 建 一 个 存放 JSP 文件 的 文件 夹 ,将 
例 5-1.jsp 复制 过 去 ,看 是 否 能 在 浏览 器 中 显示 该 JSP 页面。 

5-4 ”编写 一 个 包含 有 本 书 介绍 的 5 种 基本 语句 的 JSP 程序 。 

5-5 ”编写 一 个 简单 的 JavaBean ,并 编写 一 个 应 用 JavaBean 的 JSP 程序 。 

5-6 ”编写 一 个 HTML 文件 ,包含 一 个 输入 用 户 名 的 文本 框 和 输入 口令 的 文本 框 , 编 
写 一 个 根据 输入 的 用 户 名 和 口令 显示 不 同 结果 的 JSP 页面 。 当 用 户 名 和 口令 为 test 和 
1234 时 ,显示 “欢迎 你 进入 JSP 学 习 乐 园 !1”, 否 则 ,显示 “你 输入 的 用 户 名 和 口令 不 正确 。” 
(可 参考 JavaScript 中 的 选择 结构 语句 ) 。 

5-7 ”编写 一 个 可 以 输入 不 同 整 数 n 的 文本 框 ,在 当前 JSP 页 上 显示 n! 计算 结果 的 
JSP 页 面 。 

5-8 ”编写 一 个 显示 application 和 Session 变量 保存 的 信息 的 页 面 。 
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使 用 JSP 访问 数据 库 


现在 每 一 个 人 的 生活 几乎 都 离 不 开 数 据 库 , 如 果 没 有 数据 库 , 很 多 事情 都 会 变 得 非常 
棘手 ,也许 根本 无 法 做 得 到 。 银 行 , 大 学 和 图 书馆 就 是 几 个 严重 依赖 数据 库 系 统 的 地 方 。 
在 互联 网 上 ,使 用 搜索 引擎 .在线 购物 甚至 是 访问 网 站 地 址 Chttp://www...) 都 离 不 开 
数据 库 。 数 据 库 通常 都 安装 在 称 为 数据 库 服 务 器 的 计算 机 上 。 

本 章 主要 解决 以 下 问题 

。 什么 是 SQL; 

。 什么 是 Access 数据 库 ; 

。 如 何 创建 Access 数据 库 并 在 其 中 保存 数据 ; 

。 什么 是 ODBC 与 数据 源 ; 

。 什么 是 JDBC; 

。 如 何 通 过 JSP 页 面 访问 数据 库 。 


6.1 结构 化 查询 语言 SQ 


什么 是 SQL 呢 ? 

SQL 是 "Structured Query Language” 结 构 化 查询 语言 的 缩写 ,SQL 是 用 于 对 存放 在 
计算 机 数据 库 中 的 数据 进行 组 织 .管理 和 检索 的 一 种 工具 ;SQL 是 针对 一 种 特定 类 型 的 
数据 库 一 一 关系 数据 库 使 用 的 。 控 制 关系 数据 库 的 计算 机 程序 称 为 DBMS( 数 据 库 管理 
系统 )。 例 如 ,SQL RE DB2、MySQL、Access 等 。 当 用 户 想 要 检索 数 
据 库 中 的 数据 时 ,需要 通过 SQL 语言 发 出 请 求 ,DBMS 会 对 该 SQL 请 求 进行 处 理 并 检索 
所 要 求 的 数据 ,最 后 将 其 结果 返回 给 用 户 , 此 过 程 被 称 作为 数据 库 查询 ,这 也 就 是 数据 库 
查询 语言 这 一 名 称 的 由 来 。SQL 是 目前 使 用 最 广 的 ,标准 的 数据 库 语 言 。SQL 语言 使 得 
在 数据 库 中 存 取 或 更 新 信息 变 得 十 分 容易 。 

SQL 不 是 C.COBOL 和 FORTRAN 那 种 完整 的 计算 机 语言 。SQL 没有 用 于 条 件 测 
试 的 让 语句 ,也 没有 用 于 程序 分 支 的 语句 以 及 循环 语句 for 或 do。 确 切 地 讲 ,SQL 是 一 
种 数据 库 子 语言 ,SQL 语句 可 以 被 租 入 到 男 一 种 语言 * 从 而 使 其 具有 数据 库存 取 功能 。 
SQL 也 非 严 格 的 结构 化 语言 , 它 的 句法 更 接近 英语 语句 ,很 容易 理解 ,大 多 数 SQL 语句 
mas2 。 


都 是 直 述 其 意 , 读 起 来 就 像 自然 语言 一 样 明 了 。SQL 还 是 一 种 交互 式 查询 语言 ,允许 直 
接 查询 存储 的 数据 ,利用 这 一 交互 特性 ,可 以 在 很 短 的 时 间 内 解决 相当 复杂 的 问题 。 

本 节 的 内 容 主要 介绍 SQL 的 基本 语法 知识 。 
6.1.1 select 查询 语句 

1. 使 用 select 语句 查询 数据 

查询 是 SQL 语言 的 核心 ,而 用 于 表达 SQL 查询 的 select 语句 则 是 功能 最 强 也 是 最 
为 复杂 的 SQL 语句 , 它 从 数据 库 中 检索 数据 ,并 将 查询 结果 提供 给 用 户 。 

下 面 通过 具体 例子 说 明 select 语句 的 使 用 方式 。 首 先 建立 一 个 名 为 DB 的 简单 数据 
库 ,该 库 中 存放 一 个 叫 S 的 用 户 情 况 表 . 如 表 6. 1 所 示 。 

表 6.1 用 户 情况 表 S 


姓名 性 别 工资 年 龄 电话 居住 地 区 
李 一 男 1000 21 L111 上 海 
吴 二 女 2000 22 2222 北京 
张 三 男 3000 25 3333 成 都 
李 四 女 4000 24 4444 广州 
王 五 男 5000 25 5555 大 连 
赵 六 女 6000 26 6666 天 津 
马 七 男 7000 2 7777 郑州 


在 表 6. 1 中 有 六 列 即 六 个 字段 : 姓名 (xm) ,性别 (xb)、 工 资 (gz) ,年 龄 (nl)、 电 话 
(dh) .居住 地 区 (dz) ,下 面 看 看 如 何 用 Select 语句 对 S 表 中 的 内 容 进行 查询 。 
例 6.1 如 果 要 列 出 S 表 中 所 有 姓名 .性 别 和 工资 的 内 容 , 可 用 下 面 的 select 语句 


select 姓名 , 性别, 工资 from s 
实现 。 查 询 结果 如 表 6. 2 所 示 。 


表 6.2 查询 结果 
姓名 性 别 次 姓名 性 别 工资 
李 一 男 1000 重要 男 5000 
吴 二 女 2000 赵 六 女 6000 
张 三 男 3000 马超 男 7000 
李 四 女 4000 


例 6.2 如 果 要 列 出 S 表 中 所 有 男性 的 姓名 、 性 别 和 工资 的 内 容 ,可 用 下 面 的 select 
语句 
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select 姓名 , 性 别 , 工资 from s where 性 别 =" 男 " 
实现 。 查 询 结果 如 表 6. 3 所 示 。 
表 6.3 有 选择 的 查询 结果 


姓名 性 别 王座 姓名 性 别 a 
ee 男 1000 亚 王 男 5000 
张 三 男 3000 马 获 男 7000 


例 6.3 这 一 次 ,做 一 个 稍微 复杂 一 点 的 查询 ,如 果 要 列 出 S 表 中 年 龄 大 于 和 等 于 24 
的 所 有 女性 的 姓名 、 工 资 .电话 和 居住 地 区 ,并 且 按 工资 排序 ,可 用 下 面 的 select 语句 


select 姓名 ,工资 , 电话 form s where 年 龄 >=24 and 性 别 =" 女 " order by 工资 
实现 。 查 询 结果 如 表 6.4 所 示 。 
表 6.4 复杂 的 查询 结果 


姓名 工资 电话 居住 地 区 
李 四 4000 4444 广州 
赵 六 6000 6666 天 津 


2. 知识 点 归纳 


1) select 语句 的 四 个 子 句 

从 这 三 个 例子 可 以 看 到 ,对 于 简单 查询 ,SQL 的 select 语句 和 英文 语法 相似 ,分 析 一 
下 它 的 结构 ,select 语句 可 以 分 为 四 个 子 句 : select 查询 内 容 、from 查询 对 象 .where 查询 
条 件 和 order by 输出 方式 。 

2) select 语句 的 语法 结构 

select 语句 的 语法 格式 为 : 

select 数据 项 1, 数据 项 2,… from 表 名 where 条 件 表达 式 order py 排序 选项 

select 语句 用 来 从 数据 库 表 中 检索 出 满足 条 件 表达 式 要 求 的 数据 项 。 

3) select 子 句 的 构成 

select 子 句 列 出 所 有 要 求 select 语句 检索 的 数据 表 中 的 内 容 。 它 放 在 select 语句 开 
始 处 ,指定 此 查询 要 检索 的 数据 表 中 的 内 容 。 这 些 内 容 通 常用 数据 项 表示 , 即 一 组 用 “,” 
隔 开 的 多 个 数据 项 。 按 照 从 左 到 右 的 顺序 ,每 个 数据 项 产生 一 列 查询 结果 ,一 个 数据 项 可 
能 是 以 下 元 素 : 

。 字段 名 : 标识 from 子 句 指定 表 中 的 字段 。 如 果 字 段 名 作为 数据 项 , 则 SQL 直接 

从 数据 库 表 中 每 行 取 出 该 列 的 值 , 再 将 其 放 在 查询 结果 的 相应 行 中 。 

。 常数 : 指定 在 查询 结果 的 每 行 中 都 放 上 该 值 。 

。 SQL 表达 式 : 说 明 必 须 将 要 放 人 查询 结果 中 的 值 按 表 达 式 的 规定 进行 计算 。 
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4) from 子 句 

from 子 句 列 出 包含 所 要 查询 数据 的 表 , 它 由 关键 字 from 后 跟 一 组 用 逗号 分 开 的 表 
名 组 成 。 每 个 表 名 都 代表 一 个 包括 该 查询 要 检索 数据 的 表 。 这 些 表 称 为 此 SQL 语句 的 
表 源 ,因为 查询 结果 都 源 于 它们 。 

5) where 子 句 

where 子 句 告 诉 SQL 只 查询 某 些 行 中 的 数据 ,这 些 行 用 where 说 明 的 搜索 条 件 进行 
描述 。 

6) order by 子 句 

order by 子 句 将 查询 结果 按 一 列 或 多 列 中 的 数据 排序 。 如 果 省 略 此 子 句 , 则 查询 结果 
将 是 无 序 的 。 添 加 ASC 属性 以 升序 (从 小 到 大 ) 排 列 ,DESC 属性 以 降序 (从 大 到 小 ?排列 。 

7) group by 子 句 

group by 子 句 指 定 汇 总 查询 , 即 不 是 对 每 行 产 生 一 个 查询 结果 ,而 是 将 相似 的 行进 
行 分 组 ,再 对 每 组 产生 一 个 汇总 结果 。 

8) having 子 句 

having 子 句 告诉 SQL 只 产生 有 group by 得 到 的 某 些 组 的 结果 ,和 where 子 句 一 样 ， 
所 需要 的 组 也 用 一 个 搜索 条 件 来 指定 。 


6.1.2 运算 符 与 函数 


SQL 可 以 进行 各 种 灵活 多 样 的 查询 ,可 以 使 用 关系 运算 符 、 特 殊 运 算 符 .逻辑 运算 
符 、 函 数组 成 条 件 表达 式 来 进行 查询 。 在 这 里 使 用 的 条 件 表达 式 与 JavaScript 中 用 比较 
运算 符 组 成 的 表达 式 是 一 致 的 。 


1. 关系 运算 符 
一 般 通 过 关系 运算 符 连 接 一 个 值 来 表示 查询 条 件 。 


(1) 一 等 于 。 例如 ,字段 名 一 “ 男 ”。 
(Oe 不 等 于 。 

ee 站 于 % 例如 ,字段 名 二 70。 
(4) == 小 于 等 于 。 

(5) > 类 于:= 

(6) 过 一 大 于 等 于 。 例如 ,字段 名 二 一 20。 
2. 特殊 运算 符 


(1) In( 字 段 值 列表 ) 按 列表 中 的 值 查找 ,例如 ,字段 名 In(" 李 明 "," 王 平 "," 张 
海 ") ,表示 查询 该 字段 中 包含 “ 李 明 ”,“ 王 平 ”,“ 张 海 ” 在 内 的 记录 。 

(2) Between 初 值 and 尾 值 ”例如 ,字段 名 Between 1 and 100 ,表示 查询 该 字段 中 1 
到 100 之 间 的 所 有 数值 。 

(3) Like “文本 字段 的 字符 ”, 例 如 ,文本 字段 名 like “计算 机 * ”, 表 示 查 询 该 文本 
字段 中 包含 “计算 机 ?在 内 的 所 有 记录 。 

其 中 ,? 匹配 一 个 字符 , x 匹配 零 或 多 个 字符 ,用 方 括号 可 描述 一 个 可 匹配 的 字符 范围 。 
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3. 逻辑 运算 符 


(1) not 例如 ,姓名 not " 李 元 " ,表示 查询 “姓名 ?字段 中 除了 ”* 李 元 ”的 记录 。 
(2) and ”例如 ,年 龄 二 二 24 and 性 别 王 " 女 "。 
(3) or 例如 ,年 龄 二 二 30 or 姓名 一 " 李 元 "。 


4. 函数 
函数 有 很 多 ,这 里 仅 给 出 几 个 日 期 函数 和 合计 函数 的 说 明 。 
1) 日 期 函数 


。 DAY(date) 给 出 日 期 数据 中 的 哪 一 天 的 值 ,例如 DAY(#92-01-01#) 为 1。 
。 month (date) 一 一 给 出 日 期 数据 中 的 哪 一 月 的 值 。 
。 year (date) 一 一 给 出 日 期 数据 中 的 哪 一 年 的 值 。 


。 Weekday (date) 一 一 给 出 日 期 数据 中 星期 几 的 值 。 
。 hour (date) 一 一 给 出 日 期 数据 中 钟点 的 值 。 
。 date (date) 一 一 给 出 当前 日 期 。 


下 面 给 出 一 些 例子 。 
。 15 天 前 的 日 期 可 使 用 表达 式 : 


<Date()-15 

。 20 天 之 内 的 日 期 可 使 用 表达 式 : 

Between Date () and Date()- 20 

。 1980 年 出 生 的 记录 可 使 用 表达 式 : 

year([ 出 生日 期 字段 名 ])=1980 

。 1999 年 4 月 参加 工作 的 记录 可 使 用 表达 式 : 

year ([ 参 加 工作 时 间 ])=1999 and month([ 参 加 工作 时 间 ])=4 


2) 合计 函数 
合计 函数 的 说 明 参 见 表 6. 5。 
表 6.5 合计 函数 


均值 avg( 字 段 名 ) 对 指定 字段 求 平 均值 
count( 字 段 名 ) 统计 满足 条 件 的 记录 个 数 

count( * ) 统计 记录 (元 组 ) 个 数 

最 小 min( 字 段 名 ) 对 指定 字段 求 最 小 值 

最 大 max( 字 段 名 ) 对 指定 字段 求 最 大 值 

求 和 sum( 字 段 名 ) 对 指定 字段 求 和 
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例如 , select count(ID) from student; 用 来 统计 student 表 中 按 ID 汇总 出 的 学 生 
人 数 。 


6.1.3 Insert Into 添加 语句 


SQL 不 仅 能 进行 数据 库 的 查询 ,还 可 以 添加 新 数据 到 数据 库 中 。 
添加 语句 的 语法 格式 : 


Insert Into 表 名 (coll, col2:…) Values (valuel，value2… ) 


Insert Into 添加 语句 用 来 向 一 个 表 中 添加 指定 的 新 数据 。 
例 6.4 将 张驰 作为 一 个 新 的 成 员 加 入 表 S 中 。 


Insert Into S( xm,xb,nl,gz,dh,dz) values (' 张 驰 ',' 男 ',，28，4500,，8888，' 北 京 ') 


在 此 语句 中 , 表 S 中 列 ( 数 据 项 ) 的 名 称 列 在 S 后 面 的 括号 中 以 逗号 隔 开 , 接 下 去 是 
Value 短语 和 括号 中 同样 以 逗号 隔 开 的 每 列 数据 ,应 该 注意 的 是 数据 和 列 名 称 的 顺序 是 
相同 的 ,而 且 若 是 字符 串 型 则 以 单 引号 隔 开 。 从 概念 上 来 讲 , Insert 语句 添加 的 是 一 个 与 
表 列 结构 相 一 致 的 数据 行 ,用 取 自 Values 子 句 的 数据 来 填充 它 , 然 后 将 该 新 行 加 入 表 中 ， 
表 中 的 行 是 不 排序 的 ,因此 不 存在 将 该 行 插入 到 表 的 头 或 尾 或 两 行 之 间 的 这 个 概念 。 
Insert 语句 结束 后 ,新 行 就 是 表 S 中 的 一 部 分 了 。 

Insert 语句 还 可 以 将 多 行 数据 添加 到 另外 一 个 目标 表 (B) 中 ,在 这 种 形式 的 Insert 
语句 中 ,添加 的 数据 值 由 查询 语句 指定 。 添 加 的 值 来 自己 经 存在 的 表 (A) 中 。 看 下 面 的 
例子 。 

例 6.5 如 果 要 把 2008 年 12 月 30 日 之 前 产生 的 订单 编号 (Num)\ 日 期 (Date) 和 数 
目 (Amount) 从 A 表 拷 贝 到 另 一 个 名 为 B 的 表 中 去 ,可 用 下 面 的 语句 : 


Insert into B (Num,Date,Amount) Select Num,Date,Amount From A Where Date< '30- 12- 2008' 


这 条 语句 看 起 来 有 些 复杂 ,其 实 很 简单 ,语句 标识 了 接收 新 记录 的 表 B 和 接收 数据 
的 数据 项 名 称 , 完 全 类 似 于 单行 Insert 语句 。 语 句 的 剩余 部 分 是 一 个 查询 , 它 检 索 A 表 
中 的 数据 。SQL 先 执行 对 A 表 的 查询 ,然后 将 查询 结果 逐 行 插入 到 B 表 中 去 。 注 意 表 B 
中 添加 的 数据 项 的 格式 和 表 A 要 相同 。 


6.1.4 Update 更 新 语句 


SQL 还 可 以 对 数据 库 中 的 数据 进行 修改 和 更 新 ,而 且 更 改 数 据 库 内 容 的 SQL 语句 
更 简单 。 不 过 ,对 于 一 个 DBMS 来 说 ,数据 更 新 所 造成 的 风险 大 大 超出 了 数据 查询 。 数 
据 库 管理 系统 必须 在 更 改期 内 保护 所 存储 的 数据 的 一 致 性 ,确保 有 效 的 数据 进入 数据 库 ， 
数据 库 必 须 保持 一 致 性 ,DBMS 还 必须 协调 多 用 户 的 并 行 更 新 ,以 确保 用 户 和 他 们 的 更 
改 不 至 于 影响 其 他 用 户 的 作业 。 所 以 ,使 用 修改 和 更 新 语句 时 ,一 定 要 小 心 ! 

SQL 用 update 语句 更 新 表 中 选 定 行 的 一 列 或 多 列 的 值 。 

update 语句 的 语法 格式 : 


update 表 名 set 字段 名 1=valuel [, 字 段 名 2=value2]… where 条 件 


.157 


update 语句 使 用 value 值 更 新 选 定 表 中 指定 字段 的 数据 。 要 更 新 的 目标 表 在 update 
后 定义 ,set 子 句 指定 要 更 新 表 中 哪些 列 并 指定 它们 的 值 。where 语句 是 不 可 少 的 , 它 用 
来 指定 需要 更 新 的 行 。 

例 6.6 这 是 一 个 简单 的 update 语句 ,可 将 表 C 中 客户 名 为 slp 的 客户 的 信贷 值 更 
新 为 10 万 并 将 他 的 ID 变更 为 99。 

Update c set credit= 100000.00, idq= 99 where name= 'slp"' 

例 6.7 如 果 要 将 表 C 中 客户 ID 为 80、90、100、120 客户 的 信贷 值 更 新 为 20 万 , 状 
态 值 为 021, 可 用 下 列 语句 : 

Update c set credit= 200000.00, state= 021 where id in (80,90,100,120) 

其 中 where id in (数据 集合 ) ,表示 查询 ID 值 为 “数据 集合 ”中 的 哪些 行 的 记录 。 本 
例 中 即 搜索 ID 值 为 80、90、100、120 的 4 行 记 录 。 

SQL 处理 Update 语句 的 过 程 是 逐 行 搜索 所 指定 的 表 , 更 新 满足 搜索 条 件 的 记录 , 跳 
过 不 满足 搜索 条 件 的 记录 。 


6.1.5 Delete 删除 语句 
Delete 删除 语句 用 来 删除 数据 库 表 或 表 中 某 些 行 记录 。 
Delete 删除 语句 语法 格式 : 
Delete from 表 名 where 条 件 


由 于 Delete 删除 语句 过 于 简单 ,所 以 造成 的 后 果 是 很 严重 的 ,虽然 其 中 的 Where 子 
名 是 任 选 的 ,但 它 几 乎 总 是 存在 的 , 若 将 Where 子 句 从 Delete 语句 中 省 略 掉 , 则 被 操作 
的 目标 表 的 所 有 行 都 将 被 删除 。 

例 6.8 从 表 D 中 删除 ID 为 99 的 所 有 行 的 记录 。 


Delete from D Where ID= 99 


6.1.6 Create Table 创建 表 语 名 

SQL 语言 可 以 分 为 两 大 部 分 : 数据 定义 语言 和 数据 操纵 语言 ,以 上 介绍 的 是 数据 操 
纵 语 言 的 Select 语句 。 下 面 介绍 的 是 数据 定义 语言 ,用 来 创建 和 修改 数据 库 结 构 的 一 种 
语句 ,包括 Create 和 Drop 语句 。 

Create 语句 的 语法 格式 : 

Create Table 表 名 (字段 名 1 数据 类 型 (not nul1) ,字段 名 2 数据 类 型 (not nul11),…) 

Create 语句 用 来 创建 一 个 给 定 字段 的 表 。 

例 6.9 下 面 的 语句 创建 一 个 具有 字段 name 字符 型 30 位 ，amonut 数值 型 8 位 ,ID 
数值 型 4 位 的 表 B。 

Create Table B (name char (30), amout NUMBER(8), id NUMBER (4) ) 
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虽然 Create Table 比 前 面 介绍 的 语句 难 理解 一 些 , 但 仍然 很 直观 。 它 将 表 B 赋予 一 
个 新 表 , 并 指定 表 中 三 列 的 名 称 和 数据 类 型 。 表 被 建立 后 就 可 以 添 人 数据 了 。 可 用 下 面 
的 语句 输入 数据 。 


Insert into B (name,amout,id) values ('zhangchi",100,1) 


6.1.7 Drop table 删除 表 语 名 


如 果 不 再 需要 数据 库 中 的 某 个 表 , 可 用 Drop table 语句 将 该 表 及 其 所 保存 的 数据 从 
数据 库 中 删除 掉 。 
Drop 语句 的 语法 格式 : 


Drop table 表 名 


Drop 语句 用 来 删除 一 个 完整 的 表 。 
例 6.10 如果 要 删除 表 B 可 使 用 下 面 的 语句 。 


Drop table B 


好 了 ,SQL 语句 就 学 到 这 里 ,可 别 小 看 这 些 貌 似 英文 的 简单 语句 ,它们 的 功能 十 分 强 
大 ,使 用 它们 可 以 对 数据 库 进行 操作 。 


6.2 使 用 Access 数据 库 


数据 库 从 最 初 的 数据 文件 的 简单 集合 发 展 到 今天 的 大 型 数据 库 管理 系统 已 经 成 为 我 
们 日 常生 活 中 不 可 缺少 的 组 成 部 分 。 如 果 不 借助 数据 库 的 帮助 ,许多 简单 的 工作 将 变 得 
元 长 乏味 ,甚至 难以 实现 。 

目前 ,市 面 上 的 数据 库 产 品 多 种 多 样 ,例如 Oracle、SQL Server、 MySQL、DB2、 
Informix、Sybase、Access, 从 大 型 企业 的 解决 方案 到 中 小 企业 或 个 人 用 户 的 小 型 应 用 系 
统 , 可 以 满足 用 户 的 多 样 化 需求 。 

Access 是 Microsoft 公司 Office 办 公 套 件 中 一 个 极为 重要 的 组 成 部 分 ,是 世界 上 最 流行 
的 桌面 数据 库 管 理 系 统 。 它 提供 了 大 量 的 工具 和 向 导 , 即 使 没有 任何 编程 经 验 , 也 可 以 通过 
可 视 化 的 操作 来 完成 大 部 分 的 数据 库 管 理 和 开发 工作 。Access 的 功能 很 强大 ,可 以 处 理 公 
司 的 客户 订单 数据 ,管理 自己 的 个 人 通讯 录 , 还 可 以 对 大 量 科研 数据 进行 记录 和 人 处理 。 

本 节 的 内 容 主 要 介绍 如 何 使 用 Access 数据 库 管 理 系统 创建 数据 库 文件 及 保存 数据 
的 表 对 象 。 


6.2.1 创建 数据 库 文件 


下 面 介 绍 使 用 Access 2003 数据 库 管理 软件 创建 市 场 调查 数据 库 questionnaire 的 
方法 。 
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1. 安装 Access 数据 库 管理 系统 软件 


确认 当前 使 用 的 计算 机 中 已 经 安装 了 包含 Access 的 Microsoft Office 程序 。 如 果 没 
有 安装 Access 数据 库 管 理 软件 ,需要 先 安装 Access, 可 使 用 Microsoft Office 套件 进行 安 
装 ,其 方法 与 安装 其 他 软件 相同 。 


2. 打开 Access 主 窗 口 


在 Windows 操作 系统 桌面 上 选择 “开始 "一 “所 有 程序 ”一 Microsoft Office Access 
2003 命令 ,启动 Access, 打 开 如 图 6. 1 所 示 的 Access 主 窗口 (如 果 Windows 桌面 上 建立 
了 快捷 图 标 , 可 以 更 简单 .快捷 的 启动 Access, 只 要 直接 双击 桌面 上 的 快捷 图 标 , 即 可 打 
开 Access 主 窗口 )。 


Microsoft Access 
E) 视图 WW) 插入 0) 工具 CD) 窗口 轨 ) 帮助 只 一 只 闪 ， 


ETWAPT YT AL TE EE A A 
;开始 工作 a 


Microsoft Office 
Online 


” 连接 到 有 crosoft 0ffice 
Online 
关 使 用 Access 的 最 
* 自动 从 网 站 更 新 此 列表 


搜索 : 


示例 : “打印 多 个 副本 ” 


打开 
加 打开 .. 


D 


“新 建文 件 ”任务 窗 # 


图 6.1 Access 主 窗口 


3. 查看 “开始 工作 ”对 话 框 


首次 打开 Access 主 窗口 时 会 同时 打开 “开始 工作 ”对 话 框 ,如 图 6.1 所 示 。 在 对 话 框 
中 可 以 根据 需要 选择 不 同 选项 ,例如 ,可 在 “打开 ” 栏 单 击 “ 新 建文 件 " 菜 单 ,“ 开 始 工作 ”对 
话 框 将 切换 为 “新 建文 件 ” 对 话 框 ,如 图 6. 2 所 示 。 


4. 创建 数据 库 文件 


(1) 在 Access 主 窗口 “新 建文 件 ” 对 话 框 “新 建 " 栏 中 单 击 “ 空 数据 库 ” 选 项 ,如 图 6.2 
所 示 。 将 打开 “文件 新 建 对 话 框 ”, 如 图 6.3 所 示 。 

(2) 在 “文件 新 建 对 话 框 ”* 中 输入 数据 库 文件 名 称 questionnaire, 同 时 选择 文件 的 保 
存 路 径 , 如 图 6.3 所 示 。 


jakho ~ 


文件 新 建 数 据 库 


questionnaire 


6.3 “文件 新 建 ”对 话 框 


(3) 在 “文件 新 建 对 话 框 ”中 单 击 “ 创 建 ”" 按 钮 ,在 Access 主 窗口 中 将 打开 数据 库 窗 
口 ,如 图 6.4 所 示 ,表明 已 经 创建 了 一 个 数据 库 文件 questionnaire。 


6.2.2 创建 表 对 和 象 


从 本 质 上 说 ,Access 数据 库 是 一 种 不 断 增长 的 复杂 的 数据 组 织 结构 。Access 数据 库 
由 一 个 或 多 个 数据 表 组 成 ,一 个 数据 表 由 一 条 或 多 条 数据 记录 组 成 ,一 条 数据 记录 由 一 个 
或 多 个 数据 项 ( 列 ) 组 成 。 

在 Access 数据 库 中 ,数据 表 称 为 表 对 象 。Access 数据 库 是 存放 表 对 象 的 一 个 文件 
夹 , 表 对 象 才 是 真正 存放 数据 的 对 象 。 初 始 创 建 的 数据 库 文件 只 是 一 个 空 的 框架 ,里 面 没 
有 存放 任何 数据 。 要 存放 数据 ,需要 在 数据 库 中 创建 存放 数据 的 表 对 象 。 所 以 ,建立 
Access 数据 库 的 主要 工作 就 是 创建 表 对 象 。 
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6. 4 _ questionnaire 数据 库 窗口 


下 面 介绍 如 何在 questionnaire 数据 库 中 创建 管理 员 密 码 表 对 象 admins、 调 查 主题 表 
对 象 questions、 调 查 选 项 表 对 象 items。 


1. 创建 调查 主题 表 questions 表 结 构 


表 对 象 由 表 结 构 与 表 数 据 构 成 。 表 结构 指 表 名 、 字 上 段 名 、 数 据 类 型 ,字段 大 小 等 。 创 
建 表 结 构 后 才能 在 其 中 存放 表 数 据 。 如 同 先 有 房子 后 住人 一 样 。 

创建 表 结 构 可 以 分 为 设计 逻辑 表 结 构 与 创建 物理 表 结构 两 个 过 程 。 设 计 逻 辑 表 结 构 即 
定义 表 名 .字段 名 .字段 数据 类 型 与 字段 属性 等 ,这 些 工 作 一 般 在 数据 库 设 计 阶 段 时 完成 。 

创建 物理 表 结 构 即 在 计算 机 中 存放 的 数据 库 文件 中 定义 表 名 字段 名 .字段 数据 类 型 
与 字段 大 小 等 ,其 结果 是 为 存放 的 数据 在 计算 机 中 准备 存储 空间 ,下 面 介 绍 的 创建 表 结 构 
是 指 创建 物理 表 结 构 。 

创建 物理 表 结 构 的 操作 步骤 如 下 所 示 。 

(1) 在 questionnaire 数据 库 窗 口 “ 对 象 " 栏 按 下 “ 表 ?” 按 钮 , 单 击 数据 库 窗 口 工具 栏 上 
的 “设计 ”按钮 或 双击 “使 用 设计 器 创建 表 ” 创 建 方 法 选项 ,打开 如 图 6. 5 所 示 的 表 设 计 视 
图 窗口 。 


6.5 表 设 计 视 图 窗口 


jak2 » 


(2) 单 击 表 设计 视图 第 1 行 “ 字 段 名 称 ” 单 元 格 ,输入 第 1 个 字段 名 称 questionID 。 
(3) 在 “数据 类 型 单元 格 , 单 击 其 右边 的 向 下 箭头 按钮 ,在 其 下 拉 列 表 中 列 出 Access 

的 所 有 数据 类 型 ,选择 “自动 编号 ”, 在 说明” 单元 格 中 输入 “ 主 关 键 字 ”, 如 图 6.6 所 示 。 
FE 《2 
股 名 称 二 | |^| 


可 


图 6.6 定义 字段 名 称 、 类 型 


(4) 输入 字段 名 称 question, 选 择 “ 数 据 类 型 "为 “文本 ”型 ,在 “字段 属性 "区 “常规 ” 标 
下 “字段 大 小 ” 栏 输入 255 ,如 图 6.7 所 示 。 


图 6.7 定义 字段 名 称 、 类 型 .大 小 


(5) 输入 字段 名 称 Isvisable, 选 择 数据 类 型 为 “数字 ”型 ,在 “字段 属性 "区 “常规 ”标签 
下 “字段 大 小 ” 栏 选择 “ 字 节 ”, 在 “默认 值 ” 栏 输入 0, 如 图 6. 8 所 示 。 

(6) 输入 字段 名 称 Date, 选 择 数 据 类 型 为 “日 期 /时 间 ” 型 ,在 “字段 属性 ”区 “常规 ” 标 
签 下 “格式 ” 栏 选择 “常规 日 期 ", 如 图 6.9 所 示 。 

(7) 输入 字段 名 称 IsOpen, 选 择 数据 类 型 为 “数字 "型 ,在 “字段 属性 "区 “常规 ”标签 
下 “字段 大 小 ” 栏 选 择 “ 字 节 ”, 在 “默认 值 ” 栏 输入 1, 如 图 6. 10 所 示 。 
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stionID 自动 编号 主 关 键 字 
Question | 文本 | 
Isvisable | 数字 | 

字段 大 小 季节 

格式 

小 数位 数 自动 

标题 

默认 值 qd Ce 
有 效 性 规则 

有 效 性 文本 

必 填 字段 

索引 

智能 标记 


6.10 创建 表 结 构 


2. 定义 主 关键 字 


将 表 中 所 有 的 字段 定义 完毕 后 ,选择 最 右边 的 字段 选择 器 按钮 了 DF], 选择 QuestionID 
字段 ,然后 单 击 主 窗口 工具 栏 的 “主键 按钮 [时 | 或 单 击 右键 在 弹出 菜单 选择 “主键 命令 ， 
将 设置 该 字段 为 主 关键 字 , 如 图 6. 11 所 示 。 


Microsoft Access 


图 6.11 定义 关键 字 


设置 主键 后 ,该 字段 行 选择 器 按钮 上 会 出 现 一 个 小 钥匙 国 |, 如 图 6. 12 所 示 。 


图 6.12 关键 字符 号 


如 果 主 键 由 多 个 字段 组 成 ,可 按 住 Ctrl 键 不 放 , 然 后 单 击 字段 选择 器 选中 每 个 作为 
主键 的 字段 ,再 单 击 “ 主 键 ? 按 钮 , 即 可 同时 将 多 个 字段 同时 设置 为 主键 了 。 

如 果 要 取消 字段 的 主键 定义 ,在 选择 主键 字段 后 单 击 “ 主 键 ” 按 钮 [ 呈 | 即 可 。 

主键 字段 (关键 字 字段 ) 是 唯一 标识 记录 的 字段 。 


3. 以 表 名 questions 保存 调查 主题 表 对 象 的 表 结 构 


用 表 设 计 器 设计 好 表 结 构 之 后 可 关闭 表 设 计 视 图 并 保存 表 结 构 。 

(1) 单 击 工具 栏 上 的 “保存 ”按钮 图 ,会 弹出 如 图 6. 13 所 示 对 话 框 。 

(2) 单 击 “ 是 ”按钮 ,弹出 如 图 6. 14 所 示 “ 另 存 为 ”对 话 框 ,在 “ 表 名 称 ” 框 中 输入 
questions 并 单 击 “ 确 定 ” 按 钮 , 即 完成 表 结 构 的 创建 工作 。 
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LIN 是 本 RM 表 “ 表 1" 的 的 更 改 ? 
再 | 取消 | 
图 6.13 保存 表 结 构 对 话 框 图 6.14 选取 表 名 称 对 话 框 


(3) 单 击 表 设 计 视图 右上 角 关 闭 按钮 圆 ,可 关闭 表 视 图 ,结束 创建 表 的 任务 ,在 数据 
库 窗口 可 以 看 到 刚刚 创建 的 表 对 象 ,如 图 6. 15 所 示 。 


| 

图 使 用 向 导 创 建 表 
固 通 过 输入 数据 创 尘 表 
国 questions 


图 6.15 创建 的 表 对 象 
类 似 方法 可 以 创建 管理 员 密 码 表 对 象 admins、 调 查 选项 表 对 象 items 的 表 结 构 。 
6.2.3 在 表 对 象 中 添加 表 数 据 
1. 以 数据 表 视 图 打开 表 对 象 


(1) 启动 Access, 在 “开始 工作 ”对 话 框 “打开 ” 栏 单 击 已 经 创建 的 数据 库 
questionnaire, 再 次 打开 questionnaire 数据 库 窗口 。 

(2) 在 数据 库 窗口 “对 象 " 栏 中 按 下 “ 表 ” 按 钮 ,在 “已 有 对 象 列表 ”中 双击 admins 表 名 
称 或 选中 admins 表 对 象 单 击 数 据 库 窗口 工具 栏 “ 打 开 ” 按 钮 ,将 以 数据 表 视 图 打开 如 
图 6. 16 所 示 的 admins 表 结 构 或 称 为 空 表 。 


图 6.16 空 表 admins 


(3) 在 admname 单元 格 输入 管理 员 名 称 ljpshao .zhc, 在 admpwd 输入 口令 123456 、 
111111 ,如 图 6.17 所 示 。 
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123456 
111111| 


记录 : [14]C4] 2 [了 间 共有 记录 数 : 2 
图 6.17 向 admins 表 输 入 的 数据 


类 似 方式 可 向 其 他 表 中 添加 数据 。 
2. 切换 不 同 视 图 窗口 


在 数据 表 视 图 窗口 单 击 主 窗口 工具 栏 的 “视图 ”按钮 竖 ;, 可 以 切换 到 表 设 计 视图 窗 
口 ,可 以 修改 表 结 构 。 在 表 设 计 视 图 窗口 单 击 主 窗口 工具 栏 的 “视图 ”按钮 国 , 可 以 切换 
到 数据 表 视 图 窗口 在 表 中 添加 数据 。 


6.3 ODBC 与 JDBC 


如 何在 JSP 应 用 程序 中 使 用 数据 库 (questionnaire) 中 的 数据 呢 ? 通过 JSP 访问 数据 
库 中 的 数据 还 需要 搭建 ODBC 桥梁 并 使 用 JDBC 作为 交通 工具 。 
本 节 的 内 容 主 要 介绍 搭建 ODBC 桥梁 的 方法 与 JDBC 的 作用 。 


6.3.1 搭建 ODBC 桥梁 
1. 什么 是 ODBC 


ODBC 是 英文 Open Database Connectivity 的 缩写 ,中 文 含义 为 开放 式 数 据 库 互联 。 
ODBC 是 微软 推出 的 一 种 工业 标准 ,一 种 开放 的 独立 于 厂商 的 API 应 用 程序 接口 ,可 以 
跨 平台 访问 各 种 个 人 计算 机 、 小 型 机 以 及 主机 系统 。 

ODBC 是 一 种 访问 数据 库 的 工具 ,只 要 操作 系统 中 有 相应 的 ODBC 驱动 程序 ,任何 
程序 都 可 以 通过 ODBC 来 操纵 数据 库 。 比 如 操作 系统 中 如 果 有 Access 的 ODBC 驱动 程 
序 , 那 么 即使 计算 机 中 没有 Access 软件 ,也 可 以 在 JSP 应 用 程序 中 对 Access 数据 库 文 件 
进行 添加 、 删 除 、 更 新 记录 的 操作 ,而 且 不 必 知 道 这 个 数据 库 文件 的 存放 位 置 。 只 要 写 出 
SQL 指令 ,ODBC 驱动 程序 会 解决 访问 数据 库 文件 的 一 切 问题 。 


2. 定义 数据 源 名 称 DSN 


DSN 是 英文 Date Source Name 的 缩写 ,中 文 名 称 为 数据 源 名 称 。 它 用 来 定位 和 标 
识 ODBC 兼容 的 数据 库 。DSN 是 Web 应 用 程序 和 数据 库 之 间 连 接 的 纽带 ,搭建 ODBC 
桥梁 有 两 个 任务 ,一 个 是 选择 数据 库 驱 动 程序 。 再 一 个 重要 任务 就 是 设置 DSN。 
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在 Windows XP 操作 系统 中 自 带 有 “ODBC 数据 源 管理 器 ”专门 用 来 选择 数据 库 驱 动 
程序 与 定义 DSN。 定 义 DSN 后 , 即 可 将 SQL 指令 通过 Web 应 用 程序 传递 给 数据 库 , 对 
数据 库 进 行 各 种 操作 。 因 为 搭建 ODBC 桥梁 的 标志 为 定义 出 DSN, 所 以 ,定义 好 DSN 即 
完成 了 搭建 ODBC 桥梁 的 工作 。 

下 面 介 绍 定义 连接 questionnaire 数据 库 的 数据 源 jsp 的 方法 ,操作 步骤 如 下 所 述 。 

(1) 在 Windows 界面 选择 “开始 ”一 “控制 面板 ”命令 ,打开 “控制 面板 ”窗口 ,如 
图 6.18 所 示 。 


外 控制 面板 
文件 下) 编辑 EE) 查看 收 送 WW) 工具 CD) 帮助 00 


On - 日- 让 | 忆 we xn | 

地 址 四) | 控制 面板 。 一 

区 ”控制 面板 < 加 QQ 宝 
be 静 VIDIA QuickTine Windows 防 


请 参阅 


办 助 芭 和 


多 Yindovs Update 
多 天 助 和 支持 


型 


和 ji it 栏 和 [ 日 
Ei Es 任务 计划 第 | 期 和 时 间 
co 豆 
四 ”声音 和 音频 恨 标 添加 或 出 除 
设备 ?于 


人 @ 芭 


网 络 客 装 向 网 络 连 接 。 文件 夹 选 项 现 罗 所 


图 6.18 控制 面板 对 话 框 


(2) 在 “控制 面板 ”对 话 框 中 双击 “管理 工具 ”图 标 ,打开 “管理 工具 ”对 话 框 ,如 图 6. 19 
所 示 。 


」 文件 (E) ”编辑 (E) ”查看 (V) ”收藏 (4) ”工具 (TD 才 助 (H) 
| 中 局 BE - 小- 固 | 网 搜索 也 文件 天 丧 历 史 | 唔 号 X 吧 | 国 - 


本 
"es Re Server 。 Telnet 服务 器 本 地 安全 策 
El Extensions ..， 入 栈 


具 
主 

选 定 项 目 可 以 查看 其 说 明 。 称 型 
it B 全 


配置 您 计算 机 的 高 级 设置 服务 


另 请 参阅 : 
我 的 文档 


图 6.19 “管理 工具 ”对 话 框 
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(3) 在 “管理 工具 ”对 话 框 中 双击 “数据 源 (ODBC)” 图 标 , 打 开 “ODBC 数据 源 管理 器 ” 
对 话 框 ,如 图 6. 20 所 示 ,选择 “系统 DSN” 标 签 。 


610DHC 数据 源 管理 器 
用 户 DSN 系统 DSN | 文件 DSN | 张 动 程序 | 跟踪 | 连接 池 | 关于 | 


系统 数据 源 (5); 


图 本 | 


取消 应 用 jg 姑 助 
图 6.20 “ODBC 数据 源 管理 器 ”对话 框 


(4) 在 图 6. 20 中 单 击 “ 添 加 ”按钮 ,将 弹出 “创建 新 数据 源 ” 对 话 框 ,如 图 6. 21 所 示 。 
选择 Microsoft Access Drive 选项 并 单 击 “ 完 成 ”按钮 。 将 弹出 “ODBC Microsoft Access 
安装 ”对 话 框 ,如 图 6. 22 所 示 。 


选择 您 想 为 其 安装 数据 源 的 驱动 程序 (5)。 
名 称 有 


Driver para o Microsoft Visusl FoxPro 
£t *. mdb) 
和 人 -mab) 四 
Microsoft dBase Driver (*. dbf) 
Microsoft dBase VFP Driver (*. dbf) 
ft dBase-Treiber (#. dbf) 
ft Excel Driver 人 .xls) 
Microsoft Excel-Treiber (#.xls) a 
‘ 
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图 6.21 “创建 新 数据 源 ” 对 话 框 


(5) 在 图 6. 21 的 “数据 源 ” 栏 中 输入 DSN 名 称 jsp, 然 后 单 击 “ 数 据 库 ” 栏 中 “数据 库 :” 下 
的 “选择 ”按钮 ,将 打开 “选择 数据 库 ” 对 话 框 ,如 图 6. 23 所 示 。 

(6) 在 “选择 数据 库 ? 对 话 框 中 先 在 “目录 ? 框 下 选择 数据 库存 放 的 路 径 , 再 选择 要 使 
用 的 数据 库 , 例 如 “c:\WZKF\myjsp\DBA\questionnaire. mdb”, 然 后 单 击 “确定 ”按钮 返 
回 “ODBC Microsoft Access 安装 ”对 话 框 。 

(7) 在 “ODBC Microsoft Access 安装 ”对 话 框 中 可 看 到 数据 库 文件 的 路 径 及 名 称 如 
图 6. 24 所 示 , 单 击 “确定 ”按钮 返回 “ODBC 数据 源 管理 器 ”对 话 框 。 


» 168g( 人 | 


系统 数据 库 (Y) 


图 6.22 “ODBC Microsoft Access 安装 ”对 话 框 


目录 m): 
ci\wrkf\myjsp\dba 


数据 库 : C: \WZKF \myjsp\DBA\questionnaire. mdb 


[要 0 [Em Ew. 


系统 扫 据 库 YY) 


图 6.24 “ODBC Microsoft Access 安装 ”对 话 框 


(8) 在 "ODBC 数据 源 管理 器 ”对话 框 可 看 到 创建 的 系统 数据 源 jsp, 如 图 6. 25 所 示 ， 
单 击 “ 确 定 ” 按 钮 就 完成 了 定义 DSN 的 工作 。 

完成 以 上 操作 步骤 就 建立 了 一 个 连接 数据 库 questionnaire. mdb 的 数据 源 jsp, 即 搭 
建 了 一 个 ODBC 桥梁 。JSP 程序 可 以 通过 数据 源 jsp 找到 存放 在 questionnaire. mdb 数 
据 库 中 的 表 对 象 以 及 其 中 的 数据 。 如 果 数 据 库 改 变 了 名 称 或 存放 路 径 , 不 必 一 个 一 个 地 
修改 程序 中 所 有 数据 库 的 名 称 , 只 要 修改 DSN 配置 中 数据 库 的 存放 路 径 就 可 以 了 。 


几 a7o 。 
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图 6.25 “ODBC 数据 源 管理 器 ?对话 框 


6.3.2 JDBC 的 作用 


如 何在 JSP 文件 中 使 用 数据 源 jsp 连接 的 数据 库 中 的 数据 呢 ? 还 需要 JDBC 作为 交 
通 工 具 。 


1. 什么 是 JDBC 


JDBC 是 英文 Java Data Base Connectivity 的 缩写 ,中 文 称 为 Java 数据 库 连接 。 它 是 
Sun 提供 的 标准 数据 库 应 用 编程 接口 (Application Programming Interface, API) , 它 由 
Java 语言 编写 的 类 和 接口 组 成 ,存放 在 java. sql 类 包 中 ,目的 是 方便 开发 人 员 编 写 数据 库 
应 用 程序 。 

JDBC 可 以 看 成 是 一 种 访问 数据 库 的 方法 ,只 要 系统 中 有 相应 的 JDBC 驱动 程序 ， 
Java 应 用 程序 就 可 以 通过 JDBC 操纵 数据 库 , 对 数据 库 进行 加 、 删 、 改 记录 的 操作 。 而 且 
你 根本 不 用 知道 这 个 数据 库 放 在 哪里 。 


2. 常用 的 JDBC 接口 


(1) java. sql. DriverManager: 处 理 驱 动 程序 的 调 入 ,对 产生 新 的 数据 库 连 接 提 供 
支持 。 

(2) java. sql. Connection : 用 于 对 特定 数据 库 进 行 连接 。 

(3) java. sql. Statement: 代表 一 个 特定 的 容器 ,用 来 对 一 个 特定 的 数据 库 执行 SQL 
语句 。 

(4) java. sql. ResultSet: 用 于 控制 对 一 个 特定 语句 行 数据 的 存 取 。 

关于 java. sql 包 的 接口 及 其 方法 可 到 网 址 http://gceclub. sun. com. cn/Java_Docs/ 
html/zh_CN/api/index. html 详细 查看 。 
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3. JDBC 的 功能 


JDBC 的 实现 类 称 为 JDBC 驱动 程序 。JDBC 驱动 程序 具有 以 下 功能 : 

(1) 同一 个 数据 库 建 立 连接 ; 

(2) 向 数据 库 发 送 SQL 语句 ; 

(3) 返回 数据 库 处 理 的 结果 。 

这 些 功能 是 通过 JDBC 中 的 一 系列 接口 来 实现 的 ,这 些 接口 都 在 java. sql 包 中 。 所 
以 ,在 编写 访问 数据 库 的 JSP 程序 时 一 定 要 包含 引入 java. sql 包 的 Java 语句 。 


6.4 在 服务 器 端 通过 JSP 访问 数据 库 


本 节 的 内 容 将 通过 具体 实例 介绍 在 服务 器 端 通过 JSP 文件 访问 数据 库 的 不 同方 式 。 
6.4.1 通过 JSP 页 面 显示 数据 库 中 的 数据 

1. 查询 数据 库 中 的 数据 

例 6.11 查询 并 使 用 表格 显示 数据 库 中 数据 的 程序 (6-11.JSP) 。 


<$%@page contentType= "text/html;charset= gb2312"% > 

<%@page import="java.sql.* "%> 

<html> 

<body> 

<b> 下 面 显示 的 是 数据 库 中 的 数据 !< /b><p> 

< 多 

Class.forName ("sun.jdbc.odbc.JdbcodbcDriver"); // 注 册 驱 动 程序 

Connection c= DriverManager .getConnection ("jdbc:odbc:jsp"); 
// 创 建 连接 数据 源 的 对 象 

Statement s= (Statement)c.createStatement () 7 

String sql= "select * from admins"7 

ResultSet rs=s.executeQuery (sql); 

out.println("<table border=1>"); 

while(rs.next()) {%> 

<%out.println("<tr><tqd>"); 

out.println(rs.getstring(1)); 

out .Println("< /td>"); 

out .Println("<td> ") 7 

out .Print (Ts.-getString (2)); 

out .println ("< /td> < /tr> ") ;7 当 > 

<$%S}$%> 

<%rs.closel(); 

s.close(); 


C-close () 7 要 > 
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< /body> 

</html> 

在 浏览 器 中 输入 http://localhost:8080/myjsp/6-11. jsp; 运 行 结 果 如 图 6. 26 所 示 。 
可 以 看 到 在 页 面 上 显示 了 数据 库 questionnaire 中 表 对 象 admins 中 的 数据 。 


下 面 显 示 的 是 数据 库 中 的 数据 ! 


lpshao |123456 
zhc 111111 


图 6.26 在 JSP 页 面 中 显示 数据 库 中 的 数据 


2. 知识 点 归纳 


从 例 6. 11 中 可 以 发 现 ,要 使 用 SQL 语句 对 数据 库 中 数据 的 数据 进行 查询 ,在 JSP 文 
件 中 要 注意 以 下 事项 : 

1) 引入 SQL 类 包 

必须 使 用 二 %@ page import 一 "java. sql. *"% 放 语句 引入 Java 的 SQL 类 包 , 因 为 
JDBC 中 的 一 系列 接口 程序 都 在 java. sql 包 中 ,要 访问 数据 库 , 必 须 使 用 JDBC 中 的 接口 
程序 。 

2) 装载 并 注册 驱动 程序 

连接 JdbcOdbc 驱动 程序 的 类 名 为 sun. jdbc. odbc. JdbcOdbcDriver, 使 用 驱动 程序 
类 ,要 使 用 Class 类 的 静态 方法 forName 获取 驱动 程序 对 象 。 一 般 使 用 下 面 的 语句 装载 
并 注册 驱动 程序 : 


Class .forName ("sun.jdbc .odbc.JdbcodbcDriver"); 


3) 创建 与 数据 库 建立 连接 的 Connection 对 象 

Connection 对 象 来 自 于 java. sql. Connection 接口 , 它 的 作用 是 与 数据 库 进行 连接 ， 
通过 DriverManager 类 的 getConnection(url) 方 法 ,可 以 创建 一 个 Connection 对 象 ,可 用 
以 下 语句 创建 Connection 对 象 : 


Connection c=DriverManager .getConnection (url); 


4) URL 地 址 

要 使 用 JDBC 连接 数据 库 需 要 建立 一 个 URL 地 址 ,可 以 使 应 用 程序 知道 到 哪里 找到 
数据 库 中 的 表 。 例 6. 11 中 建立 URL 地 址 为 "jdbc:odbc:jsp"。 

创建 URL 地 址 的 语法 格式 如 下 : 
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url= jdbc: odbc://[hostname] [:port]/dbname [? user= valuel] [&password= value2] [&paraml= 
value3] [&param?2=value4]*** 
其 中 可 包括 如 下 参数 : 
。hostname, 主机 名 称 ; 
。Pport ,端口 号 ; 
。dbname ,数据 库 名 称 ,不 能 缺少 ; 
。user, 数 据 库 的 用 户 名 ， 
。password, 连接 MySQL 数据 库 的 用 户口 令 ; 
。autoReconnect, 当 数据 库 连 接 丢 失 时 是 否 自动 连接 , 取 值 true/false, 上 默认 时 为 
false; 
。maxReconnects, 如 果 autoReconnect 为 true, 此 参数 为 重 试 次 数 , 默 认为 3 次; 
。initialTimeout, 如果 autoReconnect 为 true, 此 参数 为 重新 连接 前 等 待 的 秒 数 , 默 
认为 2 秒 ; 
。maxRows:, 设 置 查询 时 返回 的 行 数 ,0 表示 全 部 ,默认 为 0; 
。useUnicode ,是 否 使 用 unicode 输出 ,true/false, 默 认为 false; 
。characterEncoding, 如 果 useUnicode 为 true, 该 参数 制定 encoding 类 型 ,建议 使 用 
gb2312 ,默认 为 无 。 同 时 使 用 useUnicode,characterEncoding, 能 解决 数据 库 输 出 
时 的 中 文 问 题 。 
5) 创建 执行 SQL 语句 的 Statement 对 象 
执行 SQL 语句 的 Statement 对 象 来 自 于 java. sql. Statement 接口 , 它 的 作用 是 对 一 
个 特定 的 数据 库 执 行 SQL 语句 操作 。 通 过 Connection 对 象 的 createStatement() 方 法 经 
过 Statement 类 型 转换 可 以 得 到 一 个 Statement 对 象 , 例 如 下 面 的 语句 : 
stmt= (Statement)c.createStatement () 7 
Statement 对 象 可 以 对 多 个 不 同 的 SQL 语句 进行 操作 。 
6) ResultSet 对 象 
ResultSet 对 象 来 自 java. sql. ResultSet 接口 , 它 被 称 为 结果 集 , 代 表 一 个 特定 的 容 
器 ,用 来 保存 查询 的 所 有 结果 数据 。ResultSet 对 象 是 通过 Statement 对 象 的 
executeQuery(sql) 方 法 在 执行 SQL 语句 后 创建 的 ,例如 下 面 的 语句 : 
ResultSet rs=s.executeQuery (sql); 
ResultSet 对 象 可 以 根据 查询 结果 按 行 对 数据 进行 存 取 。 存 取 数 据 时 可 用 到 以 下 
方法 : 
next() ,可 以 移动 指针 到 查询 到 的 当前 数据 行 的 下 一 行 。 
getXXXX(n) ,可 以 给 出 查询 到 的 当前 行 数据 第 n 列 的 数值 。XXXX 表示 不 同 的 数据 类 
型 ,例如 getLong(1) ,getString(2)。 关 于 java. sql 包 的 接口 及 其 方法 可 到 网 站 详细 查看 。 
7) 在 页 面 上 用 表格 显示 数据 库 中 的 数据 
在 例 6. 11 中 使 用 HTML 表格 标记 码 与 JSP 表达 式 语句 、Java 的 while 循环 语句 在 
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页 面 上 使 用 表格 显示 数据 库 表 对 象 中 的 数据 。 
8) 释放 资源 
最 后 要 使 用 close() 方 法 释放 所 定义 的 s、c、rs 对 象 资源 。 


6.4.2 通过 JSP 文件 在 数据 库 中 添加 与 删除 数据 
1. 在 数据 库 中 添加 与 删除 数据 
例 6.12 在 数据 库 中 添加 与 删除 数据 的 程序 (6-12. JSP) 。 


<%Q@page contentType= "text/htmlzcharset= gb2312"g% > 
<$% page import= "java.sql.* "和 > 


<html> 
<body> 
<b> 显 示 添 加 与 删除 后 的 数据 < /b><p> 
<% 
PreparedStatement ps; 
Class.forName ("sun.jdbc.odbc.JdbcodbcDriver"); // 注 册 驱 动 程序 
Connection c=DriverManager.getConnection ("jdbc:odbc:jsp"); 
// 创 建 连接 数据 源 的 对 象 


Statement s= (Statement)c.createStatement () 7 
// 添 加 记录 
String sqlL1= "insert into admins values (?,?3)"; 
Ps= (PreparedStatement)c.PrepareStatement (sql1); 
ps.setstring (1," 张 邓 "); 
Ps .setString (2,"888888"); 
Ps .executeUpadate () 7 
// 删 除 记 录 
String sql2= "delete from admins where admname= 'zhc'"; 
s.executeUpdate (sql2); 
// 查 询 记录 
ResultSet rs=s.executeQuery ("select * from admins"); 
out.println ("<table border=1>"); 
while(rs.next()) { 
out.println("<tr><td>"); 
out.println(rs.getstring (1)); 
out.printin("</td>"); 
out .Println("<td> ") 7 
out .print (zs .getString (2) ) > 
out .Println("< /td> < /tr> ") 7 
} 
raclonel(})s 
s.close(); 
c.close();%> 


< /body> 
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< /html> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/6-12. jsp ,运行 结果 如 图 6. 27 所 示 。 
可 以 看 到 在 页 面 上 显示 了 添加 到 数据 库 questionnaire 中 表 对 象 admins 中 的 数据 “张驰 ， 


888888”。 
臣 http:/localhost8080， /6-12jsp - Windows Internet Explorer = 
Se: 国 httpyhocalhostst =| 分 x | Google A 
989|" 国 h.. x | -了 = i 从 ~- 国 - = 


显示 添加 与 删除 后 的 数据 


1pshao |123456 
张驰 |888888 


图 6.27 6-12.jsp 的 运行 结果 


注意 : 如 果 再 次 运行 6-12. jsp 会 发 生 添加 数据 出 错 的 提示 ,因为 姓名 字段 是 关键 字 ， 
不 能 重复 。 


2. 知识 点 归纳 


(1) PreparedStatement 对 象 

例 6. 12 中 使 用 了 Statement 的 子 接口 PreparedStatement 对 象 , 它 的 功能 更 强大 , 它 
使 用 的 SQL 语句 中 可 以 包含 用 多 个 问号 *?” 代 表 的 字段 ,这 样 的 SQL 语句 称 为 预 编译 的 
SQL 语句 ,例如 

String sql= "insert into admins values(?,?)"; 

通过 PreparedStatement 对 象 的 setrXXXX() 方 法 可 以 分 别 给 "?” 代 表 的 字段 赋值 ， 
例如 

ps. setString(1, "文本 数据 ") ;添加 文本 类 型 数据 ,使 用 ps. setInt(2,12) 添加 整数 
型 数据 , 按 SQL 语句 中 “?” 字 段 出 现 的 顺序 为 记录 中 的 字段 添加 数据 ,从 1 开始 。 

通过 PreparedStatement 对 象 的 executeUpdate() 方 法 完成 添加 数据 的 任务 。 

(2) 使 用 不 同 的 SQL 语句 

通过 例 6. 12 可 以 看 到 ,连接 数据 库 的 方式 是 相同 的 ,不 同 的 是 SQL 语句 与 执行 
SQL 语句 的 对 象 。 


6.5 在 客户 端 通过 页 面 访问 数据 库 


在 6.4 节 中 介绍 了 在 服务 器 端 通过 JSP 文件 访问 数据 库 的 方式 ,但 这 种 处 理 方式 不 
灵活 ,需要 在 服务 器 端的 程序 文件 中 编写 相应 的 代码 才能 解决 查询 、 添 加、 删除 等 任务 ,能 
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不 能 在 客户 端 通过 页 面 直 接 向 数据 库 添 加 数据 或 进行 查询 等 操作 呢 ? 
本 节 的 内 容 主要 解决 在 客户 端 通过 页 面 访问 数据 库 的 任务 。 


6.5.1 创建 两 个 重复 使 用 的 共用 文件 


为 了 使 JSP 代码 简单 清晰 ,可 将 连接 数据 库 的 任务 单独 编写 为 一 个 共用 的 JSP 文 
件 , 将 数据 库 查询 结果 按 表格 输出 的 任务 编写 为 一 个 共用 的 JSP 文件 。 当 其 他 程序 需要 
使 用 数据 库 连接 或 用 表格 输出 数据 库 查 询 的 结果 时 ,只 要 稍 加 修改 或 直接 将 共用 的 JSP 
文件 包含 在 jsp 文件 中 即 可 。 这 样 可 以 使 代码 重复 使 用 ,还 可 以 增加 程序 的 可 维护 性 。 


1. 创建 完成 连接 数据 库 任务 的 JSP 文件 


例 6.13 连接 数据 源 jsp 的 JSP 文件 (jdbc-jsp.jsp) 。 
jdbc-jsp.jsp 源 代 码 如 下 : 


<$% page import= "java.sql.* "和 > 

<% 

Class .forName ("sun.jdbc.odbc.JdbcodbcDriver"); 

String url= "jdbc:odbc:driver= {Microsoft Access Driver (* .mdb)}; "+ 
"DBQ= C://WZKF//myjsp//DBA\\questionnaire.mdb"; 

Connection c=DriverManager.getConnection (url); 

Statement s= (Statement)c.createStatement (); 

PreparedStatement ps=null; 

> 


jdbc-jsp. jsp 解决 了 连接 数据 库 questionnaire 的 任务 ,创建 了 一 个 连接 数据 库 对 象 
c、\ 一 个 进行 SQL 查询 的 容器 对 象 s 和 一 个 进行 SQL 添加 操作 的 对 象 ps。 并 提供 了 一 种 
直接 与 数据 库 文 件 建立 联系 的 方法 。 可 以 免 去 建立 数据 源 的 工作 。 其 中 ,DBQ 用 来 说 明 
数据 库 所 在 的 物理 目录 ,例如 本 例 中 ,DBQ 表示 数据 库存 放 在 C:/WZKF/myjsp/DBA/ 


questionnaire. mdb 路径 下 。 
2. 创建 完成 用 表格 输出 数据 库 查 询 任 务 的 JSP 文件 


例 6.14 按 表格 输出 数据 库 查 询 结 果 的 JSP 文件 (table. jsp)。 
table. jsp 源 代码 如 下 : 


< 

out.println ("<table border=1>"); 
while (rs.next()) { 

out .Println("<tr><tdq> ")7 
out.println(rs.getstring(1)); 
out.printin("</td>"); 
out.printin("<td>"); 

out .print (rs.getstring (2)); 
out.printin("</td></tr>"); 
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} 
rs.close(); 
S-Close()7 
c.close(); 


> 


6.5.2 在 客户 端 向 数据 库 添加 数据 


1. 创建 用 户 输入 数据 页 面 
例 6.15 创建 一 个 在 客户 端 浏览 器 中 用 户 输入 数据 的 HTML 页 面 (6-16. htmy) 。 
< strong> 向 数据 库 添 加 数据 < /strong> 


< form name= "forml" method= "post" action= "6- 16.jsp"> 

<p> 用 户 名 < input name= "yhm" type= "text" id= "yhm" size="15"></p> 
<p> 口 令 <input type= "password" name="kl" size= "15"> < /p> 
<p><input type= "submit" name= "Submit" value= "提交 "> 

< input type= "reset" name="" value= " 重 置 "> < /font>< /p> 


< /form> 
2. 创建 数据 处 理 与 显示 数据 结果 的 页 面 


例 6.16 向 数据 库 添 加 数据 并 显示 添加 结果 的 JSP 页 面 (6-16. jsp) 。 
6-16.jsp 源 代 码 如 下 : 


<$%@page contentType= "text/html;charset= gb2312"% > 
<b> 在 客户 端 添 加 数据 到 数据 库 < /b><p> 

<%@include file="jdbc-jsp.jsp" %> 

<% 

// 添 加 数据 

String yhm= request.getParameter ("yhm"); 

String kl= request .getParameter ("kl1"); 
ps=c.preparestatement ("insert into admins values(?,?)"); 
ps.setstring (1,yhm); 

ps.setstring (2,k1); 

ps.execute (); 

// 查 询 记录 

ps=c.prepareSstatement ("select * from admins "); 
ResultSet rs=ps.executeQuery () 7 

务 > 

<%Q@include file= "table.jsp" %> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/6-16. htm, 将 显示 如 图 6. 28 所 示 的 
输入 数据 页 面 , 当 数 据 输入 后 按 “ 提 交 ” 按 钮 后 可 看 到 如 图 6. 29 所 示 的 显示 数据 页 面 。 
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向 数据 库 添 加 数据 


用 户 名 zhc98 
DS |] 
Eales 


图 6.28 用 户 输入 数据 页 面 


关 http://localhosts080/r myjsp/6 16js p- Windows Internet Explorer 


mb 

GO-E 引 
窗 耽 全 We :从 -~- 团 - 蜗 - 
在 客户 端 添 加 数据 到 数据 库 

lpshao [123456 

张驰 888888 

shaolp 111 

shaolplll |111 

zhc98 |222 


图 6.29 添加 的 数据 


3. 知识 点 归纳 


本 例 使 用 了 包含 文件 ,这 样 可 以 将 常用 的 、 共 用 的 一 些 功 能 单独 编写 为 一 个 独立 的 文 
件 ,可 以 使 代码 重用 ,并 提高 程序 的 可 维护 性 。 


6.5.3 在 客户 端 输入 查询 条 件 并 显示 查询 结果 


能 不 能 让 用 户 在 Web 页 面 上 输入 查询 数据 的 条 件 让 数据 库 服务 器 检索 特定 的 信息 ， 
然后 将 查询 结果 返回 到 用 户 的 浏览 器 上 呢 ? 下 面 的 例子 就 来 解决 这 个 问题 。 

例 6.17 按 用 户 名 查询 用 户口 令 的 JSP 文件 (6-17. jsp)。 

6-17.jsp 源 代码 如 下 : 


<$%@page contentType= "text/html;charset= gb2312"%> 

< form name= "forml" method= "post" action= "6-17.jsp"> 

<p> 用 户 名 < input name= "yhm" type= "text" id= "yhm" size="15"></p> 
<p><input type= "submit" name= "Submit" value= "执行 查询 "> 

< input type= "reset" name=""value=" 重 置 "></font></p> 

< /form> 


<%@incluge file="jdbc-jsp.jsp" %> 
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< 

String name= request .getParameter ("yhm"); 
ps=c.prepareStatement ("select * from admins where admame= ?3 "); 
ps.setstring(l,name); 

ResultSet rs=ps.executeQuery () 7 

> 

<HR> 

按 用 户 名 查询 的 结果 

<$%Q@include file="table.jsp" %> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/6-17. jsp,; 将 显示 如 图 6. 30 所 示 页 


面 ,首先 输入 查询 条 件 , 然 后 按 “ 执 行 查询 ”按钮 ,如 果 数 据 库 中 存在 该 用 户 名 将 显示 其 
口令 。 


着 httpy/localhost8080/myjsp/6-17jsp - Windows internet Explorer EEC 
OO- 国 httpy/localhost:8t > | 好 x Te Google 已 


EE 
用 户 名 
| ge 9 | 


按 用 户 名 查询 的 结果 
zhc98 [222 


图 6.30 输入 查询 条 件 并 显示 查询 结果 的 页 面 


6.5.4 一 个 简单 的 会 员 表 维 护 系 统 


下 面 将 通过 几 个 JSP 程序 文件 ,构成 一 个 Web 应 用 系统 ,通过 客户 端 对 存放 在 服务 
器 上 questionnaire 数据 库 中 的 会 员 表 admins 进行 显示 、 更 改 、 添 加 或 删除 的 操作 。 


1. 会 员 表 维 护 系 统 组 成 


会 员 表 维护 系统 包含 如 下 文件 : 保存 存放 数据 的 会 员 表 admins 的 数据 库 文件 
questionnaire、 连 接 数 据 库 的 JSP 文件 jdbc-jsp. jsp、 会 员 表 维 护 主 界面 的 JSP 文件 index. 
jsp、 组 成 主 界面 “添加 记录 ”部 分 的 HTML 文件 adduser. htm、 添 加 记录 到 数据 库 的 JSP 
文件 adduser. jsp 等 9 个 文件 。 


会 员 表 维护 主 界面 


例 6.18 会 员 表 维护 系统 的 所 有 功能 都 体现 在 其 主 界面 (index. jsp) 上 ,在 该 页 面 可 
以 进行 添加 、 更改、 删除 的 操作 ,其 具体 功能 的 实现 交 由 其 他 JSP 文件 处 理 ,index. jsp 的 
界面 如 图 6. 31 所 示 。 

index. jsp 代码 如 下 : 


ao 。 


会 员 表 维 护 主 界面 
添加 记录 


lpshao 
张驰- 
shaolp 
shaolpl11 
zhc98 


图 6.31 会 员 表 维护 主 界面 


<$Q@page contentType= "text/html;charset=GB2312"%> 
<$% einclude file="jdbc- jsp.jsp"%> 
<div align= "center"> < font color= "red"> 会 员 表 维护 主 界面 < /font> < /div> 
<jsp:include page= "adduser .htm" flush= "true"/> 
<div align= "center"> 
<table bordercolor= "# 999999" cellspacing= "0" cellpadding= "0" width= "50%" border=" 
Ly 
<tr bgcolor= "# 999999"> 
<td colspan= "2"><div align= "center"> 当前 所 有 会 员 </div>< /td> 
</tr> 
<tr><td colspan= "2"> 
< table cellspacing="0" cellpadding ="0" width="100%" align=" center" border="1" 
bordercolor= "# 999999"> 
<% 
String sql= "select * from admins"; 
ResultSet rs=s.executeQuery (sql); 
String adminname; 
while (rs.next()) { 
adminname= rs.getstring(1); 
out.print ("<tr>"); 
out.print ("<td align= center> "+ adminname+ "< /td> "); 
out.print ("<td align= center><a href=edituser.jsp ?user= "+ adminname+ "> 更 改 密码 </a 
Eo ad 
if(!adminname .equals ("admin")) 
{out .print ("<td align= center><a href=deltuser.jsp?user= "+adminname+ "> 删除 会 员 </ 
a></td>");} 
else 
out .print ("<td align=center><font color=red> 超 级 用 户 不 能 删除 < /font>< /ta>"); 


out.print ("< /tr>"); 
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} 

> 
</table></td></tr> 
</table><hr>< /div> 


3. 主 界面 中 显示 “添加 记录 ”部 分 的 HTML 文件 adduser. htm 


使 用 该 文件 是 为 了 介绍 index 文件 的 代码 ,同时 提供 在 JSP 文件 中 引入 HTML 文件 
的 方式 。 
adduser. htm 代码 如 下 : 


center"> < strong> 添加 记录 < /strong> 
"post" action=" adduser.jsp "> 
0" cellpadding= "0" width= "250" align= "center" border= 


<hr><div align: 
< form name= "forml" method: 


<table cellspacing= 
<tr><td> 用 户 名 称 < input class= "smallinput" size= 
用 户 密码 < input class="smallinput" type="password" size="8" name=" 


password"> <br> 
确认 密码 < input class="smallinput" type="password" size="8" name=" 
confirm"><br> 
</td> 
</tr> 
<tr><td><div align= "center"> 
< input class= "buttonface" type="submit" value=" 提 交 " name="submit"> 
<input class= "buttonface" type= "reset" value=" 重 置 " name= "submit2"> 
</div> 
</td> 
</tr> 
</table> 
</form> 


</div><hr> 
4. 添加 记录 到 数据 库 的 JSP 文件 adduser. jsp 
在 主 界 面 中 添加 的 会 员 记 录 数 据 将 提交 给 adduser. jsp 处 理 , 其 代码 如 下 : 


<$%@page contentType= "text/html;charset=GB2312"% ><%@include file="jdbc-jsp.jsp"%> 
< 
String name= request .getParameter ("name"); 
String password= request .getParameter ("password"); 
String confirm= request .getParameter ("confirm"); 
String sql= "select * from admins where admmame= '"+namet+ "'"; 
ResultSet rs=s.executeQuery (sql); 
out.print ("<center> "); 
String id=null; 
while (rs.next()) 
id=rs.getstring (1); 
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if (name.length()==0) { 
String errmsg= "用 户 名 字段 不 可 为 空白 !"; 
out .print ("< font color= green size=5> 错误 信息 <hr>< /font>< font color=red>"+ errmsg+ 
"< /font><hr>")7 
} 
else if (id!=null) { 
String errmsg=" 这 个 用 户 名 已 经 有 人 在 使 用 了 ,请 换 新 的 用 户 名 !"; 
out.print ("< font color= green size=5> 错误 信息 <hr>< /font>< font color=red>"+ errmsg+ 
we /font><hr>"); 
} 
else if (password.length()==0) { 
String errmsg= "密码 不 可 为 空 !"; 
out .print ("< font color= green size=5> 错误 信息 <hr>< /font>< font color= red> "+ errmsg+ 
me /Font><hr> "sy 
} 
else if(!password.equals (confirm)) { 
String errmsg= "请 重新 确认 密码 !"; 
out .print ("< font color= green size=5> 错误 信 息 <hr></font><font color=red>"+ errmsg+ 
we /font><hr>")s; 
} 
else { 
String sqll= "insert into admins (adrmame,admpwd) values ('"+name+"','"+password+"")"; 
s.executeUpdate (sql1); 
response.sendRedirect ("index.jsp"); 


} 


// 能 刷新 主 界面 
out .print ("< input type=button value= 回 上 一 页 onclick=history.back();>"); 
名 > 


本 程序 有 验证 输入 数据 是 否 为 空 .是 否 确认 ,添加 数据 到 数据 库 的 两 个 功能 。 程 序 中 
使 用 了 response 对 象 的 重新 定 址 方法 : response. sendRedirect("index. jsp")。 


5. 处 理 主 界面 中 “删除 会 员 ” 操 作 的 JSP 文件 deltuser. jsp 
deltuser. jsp 程序 代码 如 下 : 


<%@page contentType= "text/html;charset=GB2312"% > 

<%@include file="jdbc- jsp.jsp"%> 

< 

String deluser= request .getParameter ("user"); 

String sql= "delete from admins where admname= "'"+delusert+ "'"; 
s.executeUpdate (sql); 

response.sendRedirect ("index.jsp"); 

out .Print ("< input type=button value= 回 上 一 页 onclick=history.back();>"); 
$$> 
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程序 中 , "user" 是 在 单 击 * 删 除 用 户 ” 链 接 时 传递 过 来 的 数据 ;执行 删除 SQL 语句 使 
用 了 更 新 数据 的 executeUpdate 方法 : s. executeUpdate(sql); 。 


6. 处 理 “ 更 改 密码 ”操作 界面 的 JSP 文件 edituser. jsp 
edituser. jsp 程序 代码 如 下 : 


<%@page contentType= "text/html;charset=GB2312"% > 
<$String name= request .getParameter ("user");%> 
<div align= "center"> 

<hr><center> 更 改 会 员 密 码 

< form name= "forml" method= "post" action= "moduser .jsp"> 


width= "250" align= "center" border= 


<table cellspacing= "0" cellpadding= 
<tr><td> 会 员 名 称 


< input class="smallInput" size=" 


" readonly name="name" value= 


"<%$=name% >"><br> 
会 员 密 码 < input type= "password" size= 
确认 密码 < input type= 


"8" name= "password"><br> 


password" size="8" name= "confirm"><br><br><br 
></td> 
</tr> 


<tr><td><div align= "center"> 


< input type= "submit" value= "确认 " name= "Submit"> 
< input type= "reset" value= "复位 " name= "Submit2"><br><br>< /div> 
</td> 
< /tr> 


< /table> 会 员 名 称 
会 员 密码 


更 改 会 员 密码 


< /form> 


确认 密码 


</center></div> 


edituser. jsp 程序 提供 一 个 更 改 会 员 密 码 的 窗口 页 面 ,如 EREG 
图 6. 32 所 示 。 其 中 会 员 名 称 是 指定 的 。 图 6.32 ”更改 密 码 界面 


7. 将 更 改 的 密码 数据 添加 到 数据 库 的 JSP 文件 moduser. jsp 
moduser. jsp 程序 代码 如 下 : 


<$%@page contentType= "text/html;charset=GB2312"%$ ><%@include file="jdbc- jsp.jsp"%> 
< 
String name= request .getParameter ("name"); 
String password= request .getParameter ("password"); 
String confirm= request .getParameter ("confirm"); 
if (password.length()== 0) { 
String errmsg= "密码 不 可 为 空 !"; 
out.print ("< font color= green size=5> 错误 信息 <hr>< /font>< font color=red>"+ errmsg+ 
“ee font>< hr> *) 


} 
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else if(!password.equals (confirm)) { 
String errmsg= "请 重新 确认 密码 !"; 
out.print ("< font color= green size=5> 错误 信息 <hr>< /font>< font color=red>"+ errmsg+ 
we [Font> <hre>")y 
} 
else { 
String sql= "update admins set admpwd= '"+Password+ "'"; 
s.executeUpdate (sql); 
response.sendRedirect ("index.jsp"); 
’ 
out .print ("< input type=button value= 回 上 一 页 onclick=history.back();>"); 
名 > 


这 几 个 程序 虽然 简单 ,但 包含 了 数据 库 处 理 的 主要 方法 ,参考 其 方式 可 以 解决 一 般 数 
据 库 处 理 的 问题 。 在 程序 中 JSP 代码 与 HTML 代码 的 混合 使 用 方式 也 要 好 好 体会 。 


6.5.5 连接 Access 数据 库 的 不 同方 式 
1. 连接 带 有 用 户 名 与 密码 的 数据 库 


为 了 数据 库 的 安全 ,可 在 Access 数据 库 中 设置 用 户 名 与 密码 ,例如 设置 用 户 名 为 
lpshao、 密 码 为 123456 ,数据 源 为 jsp, 然 后 可 使 用 下 面 的 程序 与 数据 源 进行 连接 。 

例 6.19 与 Access 数据 库 连 接 的 程序 (jdbc-accessl. jsp) 。 

<$% page import= "java.sql.* "%> 

<%Class.forName ("sun.jdbc.odbc.JdbcodbcDriver"); 


Connection c=DriverManager .getConnection ("jdbc:odbc:jsp", "lpshao", "123456"); 
> 


2. 直接 连接 数据 库 的 方式 


没有 设置 数据 源 ,可 以 采用 直接 与 数据 库 建立 连接 的 方式 ,看 下 面 的 程序 。 

例 6.20 与 Access 数据 库 直接 连接 的 程序 (jdbc-access2. jsp)。 

<%Q@page import="java.sql.* "多 > 

< 多 

try {Class.forName ("sun.jdbc .odbc.JdbcodbcDriver"); } 

catch (ClassNotFoundException el) {el.printstackTrace () 7 } 

String url= "jdbc:odbc:driver= {Microsoft Access Driver (* .mdb)};DBQ=C://WZKF// myjsp // 
DBA \\ 数 据 库 名 .mqb"; 

Connection c= DriverManager .getConnection (url); 

名 > 


6.6 思考 与 练习 


6.6.1 思考 题 
6-1 什么 是 SQL? 
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6-2 SQL 与 JSP 存在 什么 关系 ? 
6-3 JSP 如 何 访问 不 同 数据 库 中 的 数据 ? 


6.6.2 上 机 练习 


6-1 安装 Access 数据 库 。 

6-2 ”在 Access 数据 库 中 建立 一 个 库存 管理 数据 库 文件 kcgl. mdb, 并 创建 订单 表 DD 
(ddh( 订 单 号 ) 、.hh( 货 号 )、pm( 品 名 )、dw( 订 货 单位 )、sj( 售 价 )、dgl( 订 购 量 )、dd( 送 货 地 点 )、 
rq( 送 货 日 期 ,zt( 订 单 处 理 状态 )))、 库 存 表 KC( 货 号 ,品名 ,库存 量 , 仓 库 地 点 ,单价 )。 

6-3 根据 上 面 创建 的 数据 库 kcgl, 编 写 SQL 语句 查询 下 列 问 题 : 

(1) 查询 所 有 订单 。 

(2) 10 天 内 要 送 货 的 货物 的 名 称 和 送 货 地 点 、 送 货 时 间 。 

(3) 北京 光明 公司 所 订货 物 的 名 称 和 送 货 地 点 。 

(4) 售 价 最 高 的 货 

(5) 订购 量 超过 2000 件 的 单位 。 

6-4 在 计算 机 中 使 用 Window 操作 系统 的 ODBC 创建 一 个 连接 数据 库 文件 kcgl. 
mdb 的 名 称 为 kcglDB 的 数据 源 。 

6-5 ”编写 一 个 连接 库存 管理 数据 库 kcgl 的 jdbc-kcgl. jsp 文件 。 

6-6 ”使 用 JSP 技术 编写 一 个 订货 单 处 理 系 统 , 包 括 以 下 功能 : 

(1) 输入 订单 功能 页 面 ,通过 一 个 静态 表单 页 面 输入 订货 信息 ,然后 通过 一 个 JSP 程 
序 将 输入 订货 信息 存放 到 数据 库 kcgl 的 订单 表 DD 中 。 

(2) 使 用 JSP 技术 编写 一 个 显示 所 有 订货 单 的 页 面 。 

(3) 使 用 JSP 技术 编写 一 个 按 订单 号 查询 订货 单 的 页 面 ,用 户 可 以 在 页 面 上 输入 订 
单 号 ,提交 后 显示 该 订单 号 的 货物 名 称 、 定 购 量 和 送 货 地 点 。 

(4) 使 用 JSP 技术 编写 一 个 按 订单 日 期 查询 显示 相应 订货 单 的 页 面 ,可 以 选择 “订单 
日 期 "的 范围 ,然后 按 日 期 范围 查询 并 显示 订单 号 ,货物 的 名 称 、 定 购 量 和 送 货 地 点 。 

6-7 使 用 JSP 技术 编写 一 个 输入 与 显示 新 闻 的 处 理 系 统 , 包 括 以 下 功能 : 

(1) 一 个 显示 新 闻 标题 ,发布 新 闻 时 间 、 新 闻 主 要 内 容 的 页 面 。 

(2) 一 个 输入 新 闻 标题 .发布 新 闻 时 间 、 新 闻 主 要 内 容 的 页 面 ( 提 交 到 显示 页 面 并 刷 
新 页 面 ) 。 

(3) 在 新 闻 主 要 内 容 中 包含 一 个 超 链接 到 全 部 新 闻 页 面 (HTML 文件 ) 。 
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可 扩展 标记 语言 一 XML 


可 扩展 标记 语言 (eXtensible Markup Language, XML) 正 被 迅速 的 广泛 运用 , 它 已 作 
为 与 平台 .语言 和 协议 无 关 的 格式 描述 和 交换 数据 的 广泛 应 用 标准 。XML 和 它 的 辅助 
规范 可 用 于 描述 数据 的 文档 表现 .描述 XML 文档 类 型 的 限制 ,描述 XML 文档 和 资源 之 
间 的 链接 ,描述 XML 文档 的 自动 转换 和 格式 化 。 

本 章 主 要 解决 以 下 问题 

。 什么 是 XML; 

。 什么 是 XML 的 命名 空间 ; 

。 XML 文档 由 什么 构成 ; 

。 什么 是 XML 模式 定义 ; 

。 如 何 验 证 XML 文档 的 有 效 性 ; 

。 如 何 通过 JSP 获取 XML 中 的 数据 ; 

。 如 何 使 用 JDOM 处 理 XML 数据 。 


7.1 XML 概述 


XML 是 英文 eXtensible Markup Language 的 缩写 ,中 文 含义 为 可 扩展 标记 语言 。 它 
是 万 维 网 协会 (W3C) 推 出 的 新 一 代数 据 交 换 的 标准 。 目 前 推荐 遵循 的 是 W3C 组 织 于 
2000 年 10 月 6 日 发 布 的 XML 1.0 版 本 (可 到 www. w3. org/TR/2000/REC-XML- 
2001006 了 解 相关 内 容 )。 和 HTML 一 样 ,XML 同样 来 源 于 通用 标记 语言 (SGML) ,但 
XML 与 HTML 有 很 大 的 不 同 ,HTML ee 
务 是 显示 文本 与 控制 文本 ,而 XML 是 一 种 协议 语言 ,主要 目标 是 描述 数据 和 数据 结 
其 主要 任务 是 定义 Web tnt tt de 二 
传输 。 

XML 可 以 看 成 为 一 种 简单 的 数据 存储 语言 , 它 使 用 一 系列 简单 的 标记 来 描述 数据 ， 
这 些 标 记 可 以 用 方便 的 方式 建立 ,通过 XML 文档 可 以 存储 数据 。 虽 然 使 用 XML 数据 占 
用 的 空间 比 二 进 制 数据 占用 更 多 的 空间 .但 XML 文档 极其 简单 ,易于 掌握 和 使 用 。XML 
与 Access,Oracle 和 SQL Server 等 数据 库 不 同 , 数 据 库 提供 了 更 强 有 力 的 数据 存储 和 分 
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析 能 力 , 例 如 : 数据 索引 、 排 序 、 查 找 、 相 关 一 致 性 等 ,XML 仅仅 用 来 定义 数据 。 事 实 上 
XML 与 其 他 数据 表现 形式 最 大 的 不 同 就 是 : 它 极其 简单 , 正 是 这 个 优点 使 XML 与 众 
不 同 。 

本 节 主 要 介绍 XML 文档 的 结构 及 基本 语法 。 


7.1.1 XML 文档 的 元 素 与 标记 


XML 可 以 看 成 为 一 种 描述 数据 的 标准 ,由 一 组 定义 语义 标记 的 规则 组 成 ,这 些 语义 
标记 将 文档 划分 为 多 个 部 分 ,并 且 标 记 出 文档 的 不 同 部 分 。 如 果 一 个 文档 满足 XML 1.0 
标准 “格式 正确 (Well-Formed)” 的 定义 , 则 该 文档 是 一 个 XML 文档 ,文档 带 有 . xml 文件 
扩展 名 。 

先 来 看 一 个 具体 的 XML 文档 。 


1. 创建 XML 文档 
例 7.1 一 个 描述 联系 人 数据 的 XML 文档 (7-1. xml) 。 


< ?Xml version="1.0" encoding= "gb2312" standalone= "yes"?> 
<!--xml 文档 结构 及 语法 举例 -> 
<booklist xmlns:xsi= "http://www.w3.org/2001/XMLSchema- instance" xsi: 
DoNamespaceSchemaLocation= "7-1.xsd"> 
<book sales="Y"> 
< 编号 >F8915< /编号 > 
<title> 网 站 编程 技术 实用 教程 < /title> 
<authorlist> 
<author> 邵 丽 萍 < /author> 
<author> 张 后 扬 < /author> 
< /authorlist> 
<price> 580< /price> 
< /book> 
<book sales="N"> 
< 编号 >F8916< /编号 > 
<title> 网 站 架设 彻底 研究 < /title> 
<authorlist> 
<author> 杜 上 晖 < /author> 
</authorlist> 
<price> 550< /price> 
< /book> 
< /booklist> 


看 上 去 XML 文档 的 书写 格式 与 HTML 非常 相似 ,但 这 里 的 标记 代表 的 不 再 是 显示 
格式 ,而 是 对 于 数据 的 语意 解释 。 
7-1. xml 文件 清晰 描述 了 两 本 书 的 编号 、 书 名 、 作 者 与 书 价 等 信息 。 
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2. XML 元 素 


由 7-1. xml 文件 可 以 看 到 XML 文档 是 由 一 些 元 素 构 成 的 。XML 文档 的 元 素 有 什 
么 特征 呢 ? 

1) XML 元 素 的 结构 

一 个 XML 文档 的 元 素 包 含 一 个 开始 标记 ,一 个 结束 标记 与 元 素 内 容 。 元 素 内 容 可 
以 是 字符 数据 或 其 他 元 素 ( 子 元 素 ) 。 

元 素 的 语法 格式 : 


< 开始 标记 > 元 素 内 容 < /结束 标记 > 


例如 , 例 7.1 中 price 是 一 个 元 素 的 元 素 名 ,其 开始 标记 为 二 price 二 ,结束 标记 为 
一 /price> ,元 素 内 容 为 字符 数据 580 。 

2) 空 元 素 

没有 元 素 内 容 的 元 素 称 为 空 元 素 , 例 如 所 标记 名 二 所/ 标记 名 二 , 空 元 素 可 以 写 为 
二 标记 名 /二 。 

3) 根 元 素 

从 文档 头 开始 ,一 直到 文档 尾 , 包 含 文档 中 所 有 数据 的 元 素 称 为 根 元 素 , 也 称 为 文档 
标记 , 例 7. 1 中 booklist 就 是 一 个 根 元 素 。 

4) 简单 元 素 与 复杂 元 素 

复杂 元 素 中 可 以 包含 子 元 素 。 例 如 , 例 7. 1 中 booklist 是 一 个 复杂 元 素 的 元 素 名 ,该 
元 素 包含 2 个 子 元 素 book ,因此 是 复杂 元 素 。 同 样 ,book ,authorlist 也 是 复杂 元 素 。 

简单 元 素 的 元 素 内 容 只 能 是 字符 数据 ,例如 , 例 7.1 中 的 authorlist 元 素 中 包含 的 子 
元 素 author 为 简单 元 素 , 它 的 开始 标记 为 二 author ,结束 标记 为 二 /author> ,元 素 内 容 
为 字符 数据 “ 邵 丽 萍 ”。 


3. XML 标记 


1) 开始 标记 格式 
< 标记 名 [属性 名 =" 属 性 值 "] x > 


例如 , 例 7.1 中 的 二 book sales 一 "N" 二 就 是 一 个 带 有 属性 的 开始 标记 。 

2) 结束 标记 格式 

< /标记 名 > 

例如 , 例 7. 1 中 的 二 /book 二 为 结束 标记 。 

3) 标记 的 注意 事项 

。 标记 区 分 大 小 写 ; 

。 标记 严格 配对 ; 

。 标记 以 字母 .文字 .下 划 线 .冒号 开头 ,后 跟 字 母 、 数 字 、 句 号 .冒号 .下划线 或 连 字 
符 , 不 能 有 空格 ,不 能 以 xml 开始 ; 
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。 标记 中 可 以 包含 任意 多 个 属性 ,属性 间 用 空格 分 隔 , 属 性 以 属性 名 = 王 " 属 性 值 "的 
形式 出 现 , 属 性 值 必须 用 单 引 号 或 双 引 号 括 起 来 。 


4. 字符 数据 的 实体 引用 


开始 标记 和 结束 标记 之 间 的 文字 称 为 字符 数 据 。 字 符 数据 如 果 是 一 些 特殊 符号 时 ， 
需要 采用 它 的 实体 引用 来 代替 ,特殊 符号 的 实体 引用 如 表 7. 1 所 示 。 


表 7.1 实体 引用 
特殊 符号 实体 引用 特殊 符号 实体 引用 
BS Rgt; on Rdquot; 
二 &lt; Rapos; 
& & amp; 


例如 ,一 示例 二 &lt 姓 名 &gtsJohn&lts/ 姓 名 & gt 一 /示例 二 。 其 中 ,&lt 用 来 代 
替 “<”,&gt; 用 来 代替 “> 之”。 


5. XML 注释 语法 格式 
<!--XL 注 释 --> 

XML 的 注释 方式 与 HTML 相同 。 
6. CDATA 标记 格式 

< ![CDATA[ 文 本 内 容 ]]> 


在 标记 CDATA 下 ,所 有 的 标记 ,实体 引用 都 被 忽略 ,而 被 XML 处 理 程序 当 作 字符 
数据 看 待 。 例 如 : 


< 示例 ><![cpaTA[< 姓 名 >John< /姓名 >]]>< /示例 > 


其 中 "二 姓名 二 John 一 /姓名 二 ”被 视 为 字符 数据 。 


7. XML 与 HTML 的 不 同 点 


XML 与 HTML 的 不 同体 现在 以 下 方面 : 

(1) HTML 侧重 于 如 何 显 示 文 本 ;XML 侧重 于 如 何 结 构 化 地 描述 数据 。 

(2) HTML 不 要 求 标 记 的 组 套 、 配 对 ,不 要 求 标 记 之 间 具 有 一 定 的 顺序 ;XML 严格 
要 求 退 套 、 配 对 ,并 遵循 树 形 结构 。 

(3) HTML 文档 中 不 区 分 大 小 写 ;XML 文档 中 区 分 大 小 写 。 

(4) HTML 文档 中 属性 值 的 写法 没有 严格 规定 ; XML 文档 中 属性 值 必须 写 在 引 
号 中 。 

(5) HTML 文档 中 的 标记 是 定义 好 的 ,一 般 为 英文 字母 或 英文 单词 ;XML 文档 中 的 
标记 码 可 以 随意 定义 ,可 以 是 英文 或 中 文 等 符号 。 
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7.1.2 XML 命名 空间 


XML 的 命名 空间 是 W3C 推出 的 一 个 标准 , 它 提供 了 一 种 辨识 标记 信息 ,避免 标记 


名 冲突 的 方法 。 
1. 标记 名 冲突 的 例子 


由 于 XML 中 的 元 素 名 是 预定 义 的 , 当 两 个 不 同 的 文档 或 同一 文档 使 用 相同 的 元 素 


名 时 ,就 会 发 生命 名 冲突 。 
例 7.2 一 个 带 有 命名 冲突 的 XML 文档 (7-2. xml)。 


<?xml version="1.0"encoding= "gb2312"?> 
<booklist> 
<book> 
< 编号 >F8915< /编号 > 
<title> 网 站 编程 技术 实用 教程 < /title> 
<author> 
<name> 张 后 扬 < /name> 
<title> 教 授 < /title> 
</author> 
<price> 580< /price> 
< /book> 
< /booklist> 


在 7-2. xml 文档 中 有 两 个 相同 的 标记 名 “title”。 
例 7.3 一 个 简单 的 XML 文档 (7-3. xml)。 


< ?xml version= "1.0"encoding= "gb2312"?> 
<authorlist> 
<author> 
<name> 张 后 扬 < /name> 
<title> 教 授 < /title> 
</author> 


</authorlist> 
例 7.4 一 个 简单 的 XML 文档 (7-4. xml) 。 


< ?xml version="1.0"encoding= "gb2312"?> 
<authorlist> 
< author> 
<name> 杜 上 晖 </name> 
<title> 博 士 < /title> 
< /author> 


</authorlist> 


如 果 7-3. xml 与 7-4. xml 这 两 个 XML 文档 一 起 使 用 


,由 于 两 个 文档 都 包含 带 有 不 
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同 内 容 和 定义 的 二 authorlist 盖 元 素 , 将 会 发 生命 名 冲突 。 
如 何 避 免 命 名 冲突 问题 呢 ? 


2. 使 用 前 缀 来 避免 命名 冲突 


在 标记 名 前 添加 一 个 前 级 可 以 区 别 两 个 相同 的 标记 名 。 带 有 前 级 的 标记 和 名称 为 完整 
的 标记 名 。 
完整 的 标记 名 的 语法 格式 如 下 : 


< 前 级 :标记 名 > 
例如 ,一 al: title 二 ,一 bl: title 之 即 可 区 别 两 个 相同 的 标记 名 。al 与 bl 为 前 级 。 
3. XML 的 命名 空间 标识 符 


为 了 彻底 解决 命名 冲突 的 问题 ,W3C 推出 了 一 个 标准 , 即 XML 的 命名 空间 。 使 用 
命名 空间 可 以 明确 标识 出 XML 文档 中 元 素 、 属 性 以 及 其 他 标记 ,可 以 避免 名 称 之 间 所 带 
来 的 冲突 问题 。 

在 XML 文档 中 ,一 般 都 使 用 统一 资源 标识 符 (Universal Resource Identifier, URI) 
作为 命名 空间 标识 符 ,URI 是 用 字符 串 唯一 标识 信息 资源 (网 页 、 要 下 载 的 文件 等 ) 的 工 
业 标 准 ,URI 有 两 种 常规 类 型 : 统一 资源 定位 器 (URL) 和 统一 资源 名 称 (Universal 
Resource Name,URN)。 这 两 种 类 型 的 URI 都 可 以 用 作 命 名 空间 标识 符 。URL 主要 用 
于 唯一 标识 网 页 的 空间 地 址 。URN 主要 用 于 唯一 标识 全 球 范 围 内 由 专门 机 构 负 责 的 稳 
定 的 信息 资源 ,通常 给 出 资源 名 称 而 不 提供 资源 位 置 。 

命名 空间 标识 符 最 重要 的 属性 是 它 的 唯一 性 。 使 用 者 可 以 通过 向 Internet 命名 机 构 
注册 域名 来 保证 URL 与 URN 的 唯一 性 ,并 确保 域名 后 面 使 用 的 所 有 字符 串 都 保持 
唯一 。 


4. XML 命名 空间 的 声明 


由 于 一 般 的 URI 都 比较 长 , 放 在 元 素 和 属性 名 称 前 难于 书写 ,因此 , 常 使 用 一 个 简短 
的 字符 来 代替 URI, 并 称 之 为 命名 空间 的 前 组 。 

声明 命名 空间 有 三 种 形式 : 

1) 默认 的 命名 空间 声明 方式 

如 果 XML 文档 中 所 有 元 素 属于 同一 命名 空间 , 则 只 需 在 根 元 素 声 
格式 为 ， 


< 命名 空间 前 级 : 根 元 素 标记 名 xmlns: 命名 空间 前 级 ="URI"> 
例 7.5 一 个 带 有 默认 声明 命名 空间 的 XML 文档 (7-5. xml) 。 
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< ?xml version= "1.0"encoding= "gb2312"?> 

<!-- 默 认 声 明 命名 空间 --> 

<bl:booklist xmlns:bl= "http://www.companyl.com"> 
<book> 
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< 编号 >F8915< /编号 > 
<title> 网 站 编程 技术 实用 教程 < /title> 
<price> 580< /price> 
< /book> 
< /bl:booklist> 


2) 显 式 声明 命名 空间 的 方式 

如 果 XML 文档 中 不 同 元 素 属 于 不 同 命名 空间 ,可 在 根 元 素 中 显 式 声明 不 同 的 命名 
空间 ,语法 格式 为 : 

< 根 元 素 标记 名 xmns: 命 名 空间 前 缀 1= "URI1" xmlns: 命名 空间 前 级 2= "URI2" …> 


例 7.6 一 个 带 有 显 式 声明 命名 空间 的 XML 文档 (7-6. xml) 。 


<?xml version= "1.0"encoding= "gb2312"?> 
<!-- 显 式 声明 命名 空间 --> 
<booklist xmlns:bl= "http://www.companyl .com" xmlns:al= "http://www.company2.com"> 
<bl:book> 
<bl: 编 号 >F8915< /bl: 编 号 > 
<bl:title> 网 站 编程 技术 实用 教程 < /bl:title> 
<al:author> 
<al:name> 张 后 扬 < /al:name> 
<al:title> 教 授 </al:title> 
</al:author> 
<bl:price> 580< /bl:price> 
</bl:book> 
</booklist> 


3) 隐 式 声明 命名 空间 的 方式 
如 果 XML 文档 中 不 同 元 素 属于 不 同 命名 空间 ,可 在 不 同 元 素 中 隐 式 声明 不 同 命名 
空间 ,语法 格式 为 : 


< 元 素 标记 名 xmlns= "URI1"> 
< 元 素 标记 名 xmlns= "URI2"> 


例 7.7 一 个 带 有 隐 式 声明 命名 空间 的 XML 文档 (7-7. xml) 。 


<?xml version="1.0"encoding= "gb2312"?> 
<!-- 隐 式 声明 命名 空间 --> 
<booklist> 
<book> 
< 编号 >F8915< /编号 > 
<title xmlns= "http://www.companyl.com"> 网 站 编程 技术 实用 教程 < /title> 
<author> 
<name> 张 后 扬 < /name> 
<title xmlns= "http://www.company2.com"> 教 授 < /title> 


< /author> 
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<Price> 580< /price> 
< /book> 
< /booklist> 


7.1.3 XML 文档 结构 


1. XML 文档 的 组 成 

XML 文档 包含 4 个 部 分 : XML 文档 声明 、 根 元 素 、 元 素 与 属性 。 

XML 文档 声明 一 般 放 在 XML 文档 的 第 一 行 ,用 来 说 明 XML 文档 的 版 本 号 ,文档 编 
码 等 。 例 如 : 

<?xml version="#"encoding="#"?> 


XML 声明 由 “二 ?” 开 始 , 到 “? 二 ”结束 。 在 “二 ?” 后 面 紧 跟 着 处 理 指令 的 名 称 “xml”， 
它 用 来 告诉 浏览 器 下 面 处 理 的 是 一 个 XML 文档 。 


在 XML 文档 声明 中 ,version 属性 指明 
XML 的 版 本 号 :encoding 属性 指明 XML 文 ook el 
档 使 用 的 编码 类 型 。 I 
编号 title authorlis price 
2. XML 文档 的 树 型 结构 
每 一 个 XML 文档 都 具有 树 型 结构 ， [as | | sue | 
7-1. xml 对 应 的 树 型 结构 如 图 7. 1 所 示 。 图 7.1 XML 文档 的 树 型 结构 


7.1.4 XML 模式 定义 
1. 什么 是 XML Schema 


XML 模式 定义 (XML Schema Definition ,XSD) 或 称 为 XML Schema, 是 取代 文档 类 
型 定义 (Document Type Definition, DTD) 针 对 XML 的 新 一 代 验 证 机 制 , 它 用 来 检查 
XML 文档 的 结构 .标记 和 属性 是 否 符合 规范 要 求 。 


2. XML Schema 的 作用 


XML 文档 只 说 明 数 据 的 结构 ,数据 的 具体 描述 、 数 据 是 否 正确 及 数据 类 型 都 没有 说 
明 。 这 些 问题 由 XML Schema 解决 ,XML Schema 的 主要 任务 就 是 定义 和 描述 XML 文 
档 的 结构 和 内 容 模 式 , 即 定义 XML 文档 中 元 素 之 间 的 关系 、 元 素 和 属性 的 数据 类 型 、 
XML 文档 的 结构 以 及 文档 内 容 的 约束 条 件 。 

Schema 是 一 种 保证 XML 文档 格式 正确 的 有 效 方法 ,通过 比较 XML 文档 和 Schema 
文件 可 以 确认 XML 文档 是 否 符合 规范 ,元 素 和 标记 使 用 是 否 正 确 。 

XML 文件 可 以 为 应 用 程序 提供 一 个 数据 交换 的 格式 ,而 Schema 能 让 XML 文件 成 
为 数据 交换 的 标准 ,不 同 的 使 用 者 只 需 定义 好 标准 的 Schema 文件 ,不 同 的 人 都 能 够 依照 
Schema 文档 建立 XML 文件 ,并 且 进 行 验证 ,如 此 就 可 以 轻易 地 建立 标准 和 交换 数据 , 满 
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足 网 络 共 享 和 数据 交互 。 


3. Schema 文档 


XML Schema 文档 的 扩展 名 为 . xsd。XML Schema 文档 自身 也 是 XML 文档 ,使 用 


XML 语法 。 但 其 文档 是 用 一 套 预先 规定 的 Schema 元 素 和 属性 创建 的 ,这 些 元 素 和 


属性 


定义 了 文档 的 结构 和 内 容 模 式 。 同 时 预先 制定 了 一 套 规则 确定 每 个 Schema 元 素 或 者 属 
性 的 合法 用 途 。 如 果 违 反 这 些 规则 解析 器 就 会 拒绝 解析 Schema 以 及 任何 同 它 相 联系 的 


XML 文档 。 


一 个 XML Schema 文档 主要 包含 : 元 素 的 定义 规则 ,元 素 间 关系 的 定义 规则 ,元 素 可 


使 用 的 属性 ,可 使 用 的 实体 或 符号 规则 等 。 
例 7.8 7-1. xml 文档 的 Schema 文档 (7-1. xsd) 。 


<?xml version= "1.0" encoding= "gb2312"?> 


< xs: schema elementFormDefault =" qualified" xmlns: xs =" http://www. w3. org/2001/ 


XMLSchema"> 
<xs:element name= "booklist"> 
<xs:complexType> 
<xs:sequence> 
<xs:element name= "book" type= "bookType" maxOccurs= "unbounded"/> 
</xs:sequence> 
</xs:complexType> 
</xs:element> 
<xs:complexType name= "bookType"> 
<xs:sequence> 
<xs:element name= "编号 " type= "xs:string"/> 
<xs:element name= "title" type= "xs:string"/> 
<xs:element name= "authorlist" type= "authorlistType"/> 
<xs:element name= "price" type= "xs:decimal"/> 
</xs:sequence> 
<xs:attribute name= "sales" use= "required"> 
<xs:simpleType> 
<xs:restriction base= "xs:string"> 
<xs:enumeration value= "N"/> 
<xs:enumeration value= "Y"/> 
< /xs:restriction> 
< /xs:simpleType> 
< /xs:attribute> 
< /xs:complexTYPe> 
<xs:complexType name= "authorlistType"> 
<xs:sequence> 
<xs:element name= "author" type= "xs:string" maxOccurs= "unbounded"/> 
</xs:sequence> 
</xs:complexType> 


< /xs:schema> 
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4. XML Schema 文档 的 组 成 


1) XML Schema 文档 声明 

从 7-1. xsd 的 第 1 行 可 以 看 出 ,XML Schema 文档 实际 上 是 一 个 XML 文档 ,只 是 使 
用 的 文档 扩展 名 不 同 。 

2) XML Schema 命名 空间 

从 7-1. xsd 的 第 2 行 可 以 看 出 ,XML Schema 默认 使 用 W3C 命名 空间 : xmlns:xs 一 
“http://www. w3. org/2001/XMLSchema” ; 。 

elementFormDefault 属性 值 为 “qualified” 表 示 元 素 需 要 使 用 前 组 ;属性 值 为 
“unqualified” 表 示 元 素 不 需要 使 用 前 级 。 

3) XML Schema 的 主要 元 素 

预先 规定 的 Schema 主要 元 素 如 表 7. 2 所 示 。 


表 7.2 XML Schema 的 主要 元 素 


元 素 说 明 
schema XML Schema 文档 的 根 元 素 
element 声明 XML 元 素 的 元 素 
attribute 声明 XML 元 素 属 性 的 元 素 
simpleType 声明 XML 元 素 为 简单 数据 类 型 的 元 素 
complexType 声明 XML 元 素 为 复杂 数据 类 型 的 元 素 
sequence 声明 XML 子 元 素 需 要 按 顺 序 出 现 的 “标记 名 ”元 素 
all 声明 XML 子 元 素 可 以 以 任意 顺序 出 现 的 “标记 名 ”元 素 


4) element 元 素 的 语法 格式 
<element name="#", type="#", minOccurs="#", maxOccurs="#"/> 


。 name 属性 说 明 XML 元 素 的 名 称 ; 

。 type 属性 说 明 XML 元 素 内 容 的 数据 类 型 ; 

。 minOccurs 属性 说 明 元 素 最 少 出 现 的 次 数 ; 

。 maxOccurs 属性 说 明 元 素 最 大 出 现 的 次 数 ,其 值 为 unbounded 表示 无 限 次 数 。 
5) attribute 元 素 的 语法 格式 


<attribute name="#", type="#", use="#", default="#", fixed="#"/> 


。 name 属性 说 明 XML 元 素 的 属性 名 称 ; 

。 type 属性 说 明 XML 元 素 属性 内 容 的 数据 类 型 ; 

。 use 属 性 说 明 XML 元 素 属 性 的 使 用 方式 , 值 optional 表示 属性 可 有 可 无 , 值 
required 表示 属性 需要 出 现 一 次 ; 

。 default 属性 说 明 属 性 的 默认 值 ; 
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。 fixed 属性 说 明 属 性 的 固定 值 。 
6) simpleType 简单 元 素 的 语法 格式 
<xs:simpleType name= "#"> 


<xs:restriction base= "xs:#"> 


<xs:facets element value="#"/> 


</xs:restriction> 


</xs:simpleType> 


。 name 属性 说 明 数据 类 型 的 名 称 。 
。 restriction 子 元 素 和 base 属性 说 明 使 用 的 基本 数据 类 型 ,XML Schema 内 置 的 基 


本 数据 类 型 如 表 7. 3 所 示 。 
表 7.3 XML Schema 内 置 的 数据 类 型 


数据 类 型 说 上 明 数据 类 型 说 上 明 
string 字符 串 数据 integer 整数 
decimal 任意 精度 和 位 数 的 十 进 制 数 float 标准 的 32 位 浮 点 数 
date 日 期 数据 ,格式 为 YYYY-MM-DD | dateTime | 历法 日 期 和 时 间 
boolean “| 二 元 类 型 的 True 或 者 False 数据 time 24 小 时 格式 的 时 间 可 根据 时 区 调节 


。 facets_element 子 元 素描 述 数据 类 型 的 细节 限制 , 它 具 有 多 种 形式 ,如 表 7. 4 


所 示 。 
表 7.4 facets_element 的 不 同形 式 
facets_element 子 元 素 说 明 
pattern 声明 元 素 内 容 为 正则 表达 式 的 子 元 素 
minLength 声明 元 素 内 容 最 小 长 度 的 子 元 素 
maxLength 声明 元 素 内 容 最 大 长 度 的 子 元 素 
enumeration 声明 在 有 限 的 元 素 内 容 中 选 一 的 子 元 素 


例如 ,要 定义 字符 串 数据 的 长 度 最 少 为 1、 最 大 为 6. 可 使 用 如 下 语句 : 


<xs:simpleType name= "productCode"> 
<xs:restriction base= "xs:string"> 
<xs: minLength value= "1"/> 
<xs: maxLength value= "6"/> 
</xs:restriction> 


</xs:simpleType> 
要 定义 “电话 号 码 ” 字 符 串 数据 为 0 一 9 ,样式 为 010-51688529, 可 使 用 如 下 语句 : 


<xs:simpleType name= "phoneNumber"> 
192 


<xs:restriction base= "xs:String"> 
<xs: pattern value="\d{3}- \d{8}"/> 
</xs:restriction> 
</xs:simpleType> 
其 中 ,使 用 了 正则 表达 式 , 即 由 普通 字符 (例如 字符 a 一 z 及 -) 以 及 特殊 字符 ( 称 为 元 
字符 ,例如 \d) 组 成 的 文字 模式 ( 见 表 7. 5)。 该 模式 描述 在 查找 文字 主体 时 待 匹 配 的 一 个 
或 多 个 字符 串 。 正 则 表达 式 作 为 一 个 模板 ,将 某 个 字符 模式 与 所 搜索 的 字符 串 进行 匹配 。 
表 7.5 常用 的 特殊 字符 


特殊 字符 说 明 

\d 匹配 一 个 数字 字符 。 等 价 于 [0-9] 

{n} 是 一 个 非 负 整数 。 确 定 匹 配 丸 次 

\w 匹配 包括 下 划 线 的 任何 单词 字符 。 等 价 于 [LA-Za-z0-9_] 

[zyz] 匹配 所 包含 的 任意 一 个 字符 。 例 如 ,[abc] 可 以 匹配 plain 中 的 a 

(pattern) 匹配 pattern 并 获取 这 一 匹配 

x 匹配 前 面 的 子 表达 式 零 次 或 多 次 

十 匹配 前 面 的 子 表 达 式 一 次 或 多 次 。 例 如 ,zo 十 ' 能 匹配 "zo" 以 及 "zoo" ,但 不 能 匹配 "z" 


要 定义 “电子 邮箱 地 址 ?字符 串 数据 ,样式 为 zhcl111@sina. com, 可 使 用 如 下 语句 : 


<xs:simpleType name= "SEmail"> 
<xs:restriction base= "xs:string"> 
<xs:maxLength value= "30"/> 
<xs:pattern value="\w+ ([-+.]\Ww+t)*@ \wt ([-.]\Wwt)* \.\Ww+t ([-.]\Ww+)*"/> 
</xs:restriction> 
</xs:simpleType> 
7) complexType 复杂 元 素 的 语法 格式 
如 果 声 明 的 XML 元 素 拥有 属性 和 子 元 素 , 则 使 用 complexType 元 素 声 明 其 属性 及 
子 元 素 。 
<xs:complexType name="#"> 
<xs: 标 记名 元 素 > 


< lonmnt > 


</xs: 标 记名 元 素 > 
<xs:attribtue ** ./> 


< /xs:complexType> 
name 属性 说 明 数 据 类 型 的 名 称 。 
5. 使 用 XML Schema 文档 检验 XML 文档 有 效 性 的 方式 


在 XML 文档 中 指定 验证 使 用 的 XML Schema 文档 ,例如 
Ima98 。 


<booklist xmlns:xsi= "http://www.w3.org/2001/XMLSchema- instance"xsi: 

noNamespaceSschemaLocation= "7-1.xsd"> 

其 中 , xsi 为 XML 文档 默认 命名 空间 http://www. w3. org/2001/XMLSchema- 
instance 的 前 级 。 

xsi: noNamespaceSchemaLocation 属性 指定 不 使 用 命名 空间 方式 指定 XML Schema 
文档 的 路 径 。 这 里 表示 XML Schema 文档 要 存放 在 与 验证 的 XML 文档 的 同一 路 径 下 ， 
例如 ,作者 使 用 的 是 myjsp 目录 。 


6. 编写 XML Schema 文档 的 工具 


编写 XML Schema 文档 可 以 使 用 一 些 辅助 工具 , XML Spy、XML Validator 和 Cape 
Clear Studio 都 是 具有 XML Schema 创建 功能 的 全 方位 XML 综合 开发 环境 。 


7.1.5 使 用 FrontPage 2003 验证 XML 文档 的 格式 


使 用 FrontPage 2003 可 以 编写 XML 文档 并 验证 其 有 效 性 。 
下 面 介 绍 使 用 FrontPage 2003 创建 与 验证 7-8. xml 文档 的 具体 步骤 。 


1. 输入 XML 文档 代码 


启动 FrontPage 2003, 在 “代码 ”视图 下 输入 代码 ,如 图 7.2 所 示 。 
[I Miaocof Frontfege Tow ooe TT stile 


ersion = “1.0” encodine= “GB2312” ?> 
> 


< 公司 > 
De re 


> 


从 本 公司 
te /电话 > 


并 5 
上. 4 > 


7.2 在 FrontPage 2003 中 输入 XML 文档 代码 


2. 保存 XML 文档 为 7-8. xml 


在 FrontPage 2003 工具 栏 单 击 “ 保 存 ” 按 钮 辆 ;打开 “另存 为 ”对 话 框 ,在 其 中 输入 文 
件 名 7-8, 设 置 保存 类 型 为 “XML 文件 ”, 并 将 文件 保存 在 “C:\wzkf\myjsp”, 如 图 7.3 所 
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示 。 单 击 “ 保 存 ” 按 钮 。 


图 7.3 在 FrontPage 2003 中 保存 XML 文档 


3. 验证 7-8. xml 文档 


(1) 保存 文件 后 ,在 FrontPage 2003 菜单 栏 单 击 “ 视 图 ”一 “工具 栏 ”>“XML 视图 ” 菜 
单 ,打开 “XML 视图 ”对 话 框 ,如 图 7.4 所 示 。 

(2) 单 击 “重新 设置 XML 格式 ”按钮 ,可 以 看 到 ， 
XML 代码 的 格式 被 重新 进行 了 调整 。 

(3) 单 击 “ 验 证 标准 格式 的 XML” 按 钮 ,将 出 现 如 
图 7.5 所 示 的 “文档 的 格式 及 嵌 套 均 正 确 ” 的 对 话 框 ,表明 所 编写 的 XML 文档 满足 XML 
1.0 标准 “良好 格式 ”的 定义 ,是 一 个 具有 良好 格式 的 XML 有 效 文档 。 否 则 ,会 出 现 出 错 
信息 ,可 根据 提示 修改 文档 。 


图 7.4 “XML 视图 ”对话 框 


(8. xmls 


al ytaton ~ "1,0" encodtngrr0B23127 7> 
< 联 人 
< 公司 >A 公 司 </ 公 司 > 
Er (010) E345676< /电话 > 
i 
< /城市 > 


< 城市 > 北京 市 
< 省 份 > 北京 </ 省 份 > 
< 由 编 >100001</ 邮 搞 > 


< 公司 >B 公 司 </ 公 司 > 
人 1021)87654321</ 电 话 > 
< 


1 
< 城市 > 上 海 </ 城 市 > 
< 省 份 > 上 海 </ 省 份 > 


< 则 编 >200002</ 邮 编 > 
</ 地 址 > 


图 7.5 调整 格式 并 给 出 验证 结果 
Nm2Q0 。 


7.2 在 浏览 器 中 格式 化 显示 XML 文档 中 的 数据 


要 在 IE 浏览 器 中 格式 化 显示 XML 文档 中 的 数据 ,可 以 使 用 CSS 样式 表 文 件 或 
XSLT 模式 文件 来 实现 。 
本 节 的 内 容 主要 介绍 在 浏览 器 中 格式 化 显示 XML 文档 数据 的 方式 。 


7.2.1 使 用 CSS 显示 XML 文档 中 的 数据 
1. 在 XML 文件 中 添加 引用 CSS 样式 表 的 语句 
例 7.9 添加 引用 CSS 样式 表 语 句 的 XML 文件 (7-9. xml) 。 


<?xml version="1.0" encoding= "gb2312" ?> 
<?xml:stylesheet type= "text/css" href="7- 9.css"?> 
<1z> 

<reason> 你 想 学 MT 吗 ?< /reason> 

< question> 是 不 是 很 难 学 呀 ?< /question> 
<think> 我 是 不 是 要 学 呢 ?< /think> 

< request> 如果 你 要 学 习 , 好 好 看 课件 吧 !< /request> 
</1z> 


将 7-9. xml 文件 存放 在 myjsp 文件 夹 中 。 

2. 创建 显示 XML 数据 的 CSS 文件 

例 7.10 显示 XML 数据 的 CSS 样式 表 文 件 (7-9. css)。 
lz{background- color: #00ffff; width:80% ;} 

reason { 


font- family:" 宋 体 "; font- size: 22pt;display: block;margin- bottom:10pt;margin- left:20; 
E 


question{font- family:" 宋 体 ";font- size:9pt;color:red; } 

think{ 

font- family:" 宋 体 ";font- size: 9pt;block;Display:10pt;color:green; 
} 


request{ 

font— family:" 宋 体 ";font- size :pt; Display: block; color: blue;margin- left: 20pt; 

} 

将 7-9. css 文件 存放 在 myjsp 文件 夹 中 。 在 浏览 器 中 输入 http://localhost:8080/ 
myjsp/7-9. xml, 可 看 到 如 图 7.6 所 示 页 面 。 
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你 想 学 XML 吗 ? 


是 不 是 很 难 学 叮 ? 我 是 不 是 要 学 呢 ? 
如 果 你 要 学 习 , 好 好 看 课件 吧 ! 


图 7.6 使 用 CSS 显示 的 XML 数据 


7.2.2 使 用 XSL 显示 XML 文档 中 的 数据 


1. 在 XML 文件 中 添加 引用 XSL 样式 文件 的 语句 
例 7.11 添加 引用 XSL 样式 文件 语句 的 XML 文件 (lxr. xml) 。 


< 了 ?xml version="1.0" encoding= "GB2312" ?> 
<?xml- stylesheet type= "text/xs1" href="]lxr.xsl" ?> 
< 联系 人 列表 > 

< 联系 人 > 

< 姓名 > 张 三 < /姓名 > 
<ID>001</ID> 

< 公司 >A 公 司 </ 公 司 > 

< 电话 > (010) 62345678< /电话 > 
< 地 址 > 

< 街道 > 五 街 1234 号 < /街道 > 

< 城市 > 北京 市 < /城市 > 

< 省 份 > 北京 </ 省 份 > 

< 邮编 >100001< /邮编 > 

</ 地 址 > 

< /联系 人 > 

< 联系 人 > 

< 姓名 > 李 四 < /姓名 > 

< ID> 002< /ID> 

< 公司 >B 公 司 </ 公 司 > 

< 电话 > (021)87654321< /电话 > 
< 地 址 > 

< 街道 > 南京 路 9876 号 < /街道 > 
< 城市 > 上 海 < /城市 > 

< 省 份 > 上 海 </ 省 份 > 

< 邮编 >200002< /邮编 > 

</ 地 址 > 

< /联系 人 > 
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< /联系 人 列表 > 
将 lxr. xml 文件 存放 在 myjsp 文件 夹 中 。 


2. 创建 显示 XML 数据 的 XSL 文件 
例 7.12 显示 XML 数据 的 XSL 样式 文件 (lxr. xsl) 。 


<?xml version="1.0" encoding= "GB2312"?> 
<xsl:stylesheet xmlns:xsl= "http://www.w3.org/TR/WD- xs1" > 
i 根 模 板 --> 

<xsl:template match="/"> 

<HIML> 

<HERAD> 

<TITLE>E 公 司 的 客户 联系 信息 < /TITLE> 

< /HEAD> 

< BODY> 

<xsl:apply- templates select= "联系 人 列表 "/> 

< /BODY> 

< /HTML> 

</xsl:template> 

<!-- 联 系 人 列表 模板 --> 

<xsl:template match= "联系 人 列表 "> 

<xsl:for-each select= "联系 人 "> 

<UL> 

<LI><xsl:value- of select=" 姓 名 "/>< /LI> 

<UL> 

<LI> 用 户 ID:<xsl:value- of select= "ID"/> < /LI> 

<LI> 公 司 : <xsl:value- of select=" 公 司 "/>< /LI> 

<LI> 电 话 : <xsl:value- of select=" 电 话 "/>< /LI> 

<LI> 街 道 : <xsl:value- of select= "地 址 /街道 "/> < /LI> 
<LI> 城 市 : <xsl:value- of select= "地 址 /城市 "/> < /LI> 
<LI> 省 份 : <xsl:value- of select= "地 址 /省 份 "/>< /LI> 
<LI> 邮 编 : <xsl:value- of select= "地 址 /邮编 "/> < /LI> 
< /UL> 

</UL> 

</xsl:for- each> 

</xsl:template> 


</xsl:stylesheet> 


将 lxr. xsl 文件 存放 在 myjsp 文件 夹 中 。 在 浏览 器 中 输入 http://localhost: 8080/ 
myjsp/lxr. xml, 可 看 到 如 图 7.7 所 示 页 面 。 

如 果 将 XML 文件 比 作 数据 原料 的 话 , 那 么 XSL 就 好 比 “ 筛 子 ” 与 “模型 ”,XSL 可 以 
筛选 自己 需要 的 数据 原料 ,XSL 可 以 设计 好 表现 数据 的 模型 ,并 用 XML 中 筛 出 的 数据 来 
填充 模型 ,按照 XSL 定义 的 模型 运行 XML 程序 即 可 看 到 按 模 型 定义 的 样式 筛选 出 的 
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o 公司 : A 公 司 
o 5 电话 (010)62345678 
o 街道 :五 街 1234 号 


o 邮编 100001 


。 李 四 

o 用 户 ID:002 

o 公司 :B 公 司 

o 电话 : (021)87654321 
o 街道 : 南京 路 9876 号 
o 城市 :上 海 

o 省 份 上 海 

o 邮编 : 200002 


图 7.7 使 用 XSL 显示 的 XML 数据 
XML 中 的 数据 ,其 数据 是 通过 HTML 页 面 显示 的 。 
3. XSL 文档 的 框架 


XSL 文档 由 3 部 分 构成 : XML 文档 声明 、XSL 文档 声明 与 XSL 模板 。 

1) XML 文档 声明 

XSL 文档 自身 也 是 XML 文档 ,所 以 ,与 XML 文件 一 样 ,在 XSL 文档 第 1 行为 XML 
文档 声明 。 

2) XSL 文档 声明 

XSL 文档 中 第 2 行 和 最 末 行 通过 xsl:stylesheet 元 素 对 声明 这 是 一 个 XSL 样式 表 文 
档 。 并 在 第 2 行 开 始 标记 名 后 ,用 xmlns:xsl 二 “URL” 声 明了 命名 空间 ,URL 为 http:// 
www. w3. org/ TR/WD-xsl。 

3) XSL 模板 

其 他 行 可 以 用 来 定义 根 模板 与 其 他 模板 ,在 例 7.12 中 定义 了 一 个 根 模板 与 一 个 联系 
人 列表 模板 。XSL 文档 中 必须 有 根 模板 。 

XSL 文档 是 由 多 个 模板 组 成 的 ,这 些 模板 组 合成 一 个 完整 的 XSL 模型 。 好 比 船 与 
集装箱 , 先 将 货物 装 在 不 同 的 集装箱 中 ,再 将 集装箱 堆放 在 船上 。 因 此 ,设计 XSL 文档 要 
先 从 整体 上 考虑 将 整个 XSL 文档 分 成 几 个 模板 ,然后 分 别 设计 模板 的 具体 内 容 , 最 后 将 
各 个 模板 整合 在 一 起 。 


4. XSL 模板 定义 语句 
XSL 模板 定义 语句 格式 为 : 


<xsl:template match= "标记 名 "[language= "脚本 语言 名 "]> 


Imzo4 。 


</xsl:template> 

。 match 属性 用 来 确定 哪个 节点 执行 此 模板 ,一 般 使 用 标记 名 (节点 ) 作 为 属性 值 ， 
其 值 还 代表 该 模板 名 称 。language 属性 用 来 确定 此 模板 中 执行 什么 脚本 语言 ,其 
取 值 与 HTML 中 的 Script 标记 的 Language 属性 值 相同 ,默认 值 是 JScript。 

。 XSL 模板 定义 语句 用 match 属性 指定 节点 ,对 这 些 特定 的 节点 定义 一 种 输出 
形式 。 

。 XSL 文件 必须 有 一 个 根 模板 ,其 match 属性 值 为 “/”。 

5. XSL 调用 模板 语句 


调用 模板 语句 用 来 确定 使 用 哪个 模板 作为 输出 样式 。 

调用 模板 语句 格式 为 : 

<xsl:apply- templates select= "模板 名 "[order- by= "标记 列表 "]/> 

select 属性 用 来 确定 选择 哪个 模板 。order-by 属性 用 来 确定 排序 方式 。 在 标记 列表 
前 添加 加 号 (十 ) 表 示 按 此 标记 内 容 升序 排序 , 减 号 (一 ) 表 示 降 序 排序 ,标记 之 间 以 (;) 
分 隔 。 

6. XSL 的 循环 语句 

循环 语句 用 来 确定 循环 的 节点 集 。 

XSL 循环 语句 的 格式 为 : 


<xsl:for-each select= "节点 集 "[order- by= "标记 列 表 "]> 


< /xs1:for- each> 


select 属性 用 来 确定 循环 体 为 哪个 节点 集 。order-by 属性 同上 。 
7. XSL 的 取 值 语句 


取 值 语句 用 来 确定 选择 哪个 节点 的 值 。 
XSL 取 值 语句 的 格式 为 : 


<xsl:value- of select=" 节 点 "/> 


select 属性 用 来 确定 选择 哪个 节点 的 值 。 
例 7.13 一 个 包含 学 生 简历 数据 的 XML 文件 (Gjl. xml) 。 


<?xml version="1.0" encoding= "GB2312"?> 
<?xml:stylesheet type= "text/xsl" href= "jl1.xsl"?> 
<document> 

< resume> 


<name> 学 生 A< /name> 
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< sex> 女 < /sex> 

<birthday> 1989.1.1< /birthday> 
<skil1> 唱 歌 < /skil1> 
</resume> 

< resume> 

<name> 学 生 B< /name> 

<sex> 女 </sex> 

<birthday> 1990.12.2< /birthday> 
<skil1l> 打 篮球 < /skil1> 

< /resume> 

<Tesume> 

<name> 学 生 C< /name> 

< sex> 男 < /sex> 

<birthday> 1991.1.2< /birthday> 
<skil1> 网 站 开发 < /skil1> 

< /resume> 


< /document> 
例 7.14 显示 XML 文件 中 学 生 简 历数 据 的 XSL 样式 文件 (lxr. xsl) 。 


<?xml version="1.0" encoding= "GB2312"?> 

<xsl:stylesheet xmlns:xsl= "http://www.w3.o0rg/TR/WD- xs1"> 
<!-- 根 模板 --> 

<xsl:template match="/"> 

<HTML>< HEAD><TITLE> XML 技术 < /TITLE>< /HEAD> 

<BODY BGCOLOR= "# 00CC66"> 

<xsl:apply- templates select= "document/resume"/> 

<DIV ALIGN= "CENTER"> 

< form> < input type= "button" value= "关闭 本 页 " onclick= "JAVASCRIPT:window. 
close()"/> 

< /form> < /DIV> 

< /BODY> < /HTML> 

</xsl:template> 

<!-- 网 络 简历 模板 --> 

<xsl:template match= "resume"> 

< TABLE border= "2" cellspacing= "1" bordercolor= "# 6666FF"align= "center"> 
<CAPTION> 网 络 简 历 [ 

<xsl:eval> formatIndex (childNumber (this), "I")</xsl:eval> 
]< /CAPTION> 

<TR> 

<xsl:apply- templates select= "name" /> 

<xsl:apply- templates select= "sex" /> 

<xsl:apply- templates select= "birthday" /> 

</TR> 

<TR><TD> 技 能 < /TD> <TD COLSPAN= "5"> 

< TABLE cellspacing= "1"> 
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<xsl:apply- templates select= "skill"/> 

< /TABLE> 

D> 

</TR> 

<TR> 

<TD VALIGN= "TOP"> 照片 < /TD> 

<TD COLSPAN= "5" ALIGN= "CENTER"> 

< IMG SRC= "girl .gif" VSPRACE= "2"/> 

</TD> 

</TR> 

< /TABLE> 

<BR/> 

</xsl:template> 

<!- 姓 名 模板 --> 

<xsl:template match= "name"><TD> 姓 名 < /TD> 
<TD><xsl:value- of/>< /TD> 
</xsl:template> 

<!-- 性 别 模板 --> 

<xsl:template match= "sex"><TD> 性 别 < /TD> 
<TD><xsl:value- of/>< /TD> 
</xsl:template> 

<!-- 生 日 模板 --> 

<xsl:template match= "birthday"><TD> 生 日 < /TD> 
<TD><xsl:value- of/>< /TD> 

< /xsl:template> 

< !-- 技 能 模板 --> 

<xsl:template match= "skill"> 
<TD><xsl:value- of/>< /TD> 
</xsl:template> 

</xsl:stylesheet> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/jl. xml, 可 看 到 如 图 7. 8 所 示 页 面 。 


7.8 使 用 XSL 显示 的 简历 数据 
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XSL 语言 的 基本 语法 


. XSL 的 内 置 函 数 


value() 一 一 返回 元 素 或 属性 的 值 。 

next() 一 一 返回 集合 中 下 一 个 元 素 。 

end() 一 一 返回 集合 中 最 后 一 个 元 素 。 

index() 一 一 返回 该 元 素 在 集合 中 的 位 置 ,返回 值 是 一 整数 ,如 果 是 第 一 个 元 素 返 
回 值 为 0。 

nodeName() 一 一 返回 元 素 的 名 字 , 即 标记 名 。 

number( 参 数 ) 一 一 将 值 转换 为 数值 形式 ,如果 不 是 数值 则 返回 空 。 


. XSL 的 逻辑 运算 符 


逻辑 与 一 一 $and$ 或 &&&&。 
逻辑 或 $or$ 或 || 。 
逻辑 非 一 一 $not$ 。 


. XSL 的 关系 运算 符 


相等 一 一 二 $ eq$。 
相等 (不 区 分 大 小 写 ) 一 一 二 $ ieq$ 。 
不 等 一 一 ! 二 $ne$。 


不 等 (不 区 分 大 小 写 ) 一 一 $ ine $ 。 

小于 一 过 外 人 

小 于 (不 区 分 大 小 写 ) 一 一 $ilt$ 。 

小 于 等 于 一 一 二 = $le$。 

小 于 等 于 (不 区 分 大 小 写 ) 一 一 $ile$ 。 

大 于 一 一 记 $ gt$。 

天 于 (不 区 分 大 小 写 ) 一 一 $igt$。 

大 于 等 于 一 一 > 一 $gey$ 。 

大 于 等 于 (不 区 分 大 小 写 ) 一 一 $ ige$ 。 

集合 运算 符 一 一 $ all$ ,如 果 集 合 中 所 有 项 目 均 满足 条 件 则 返回 “ 真 ”。 
集合 运算 符 一 一 $any$ ,如 果 集 合 中 任意 项 目 满足 条 件 则 返回 “ 真 ”。 
集合 运算 符 一 一 | ,返回 两 个 集合 的 联合 。 


. XSL 的 特殊 运算 符 


/ 一 一 选择 子 元 素 ,返回 左 侧 元 素 的 直接 子 元 素 ;如 果 “/” 位 于 最 左 侧 表示 选择 根 
结 点 的 直接 子 元 素 。 
// 一 一 递归 搜索 指定 的 元 素 ;如 果 位 于 最 左 侧 表示 从 根 结 点 出 发 递归 下 降 搜 索 指 
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定 元 素 。 
。. 一 一 表示 当前 元 素 。 
> 通配符 ,选择 任意 元 素 ,不 考虑 名 字 。 


。，@ 一 一 取得 属性 值 , 可 作为 属性 名 的 前 缀 。 


* @* 属性 通配符 ,选择 任意 属性 ,不 考虑 名 字 。 

。 : 一 一 分 隔 符 ,将 命名 空间 前 级 与 元 素 或 属性 名 分 隔 开 来 。 
本 时 六 在 相关 节点 上 应 用 指定 方法 。 

。 Ox% 分 组 ,明确 指定 优先 顺序 。 

a 应 用 过 滤 样 式 。 

”人 回 * 下 标 运算 符 , 用 于 在 集合 中 指示 元 素 。 


5. XML 的 单 选 条 件 判断 语句 的 应 用 


XML 的 单 选 条 件 判断 语句 可 以 通过 条 件 表达 式 的 不 同情 况 选择 输出 数据 的 样式 。 
例 7.15 包含 数据 的 XML 文档 (tj. xml) 。 


< ?Xml version="1.0"encoding= "GB2312"?> 

< ?xml:stylesheet type= "text/xsl" href= "tj .xs1"?> 
< document> 

< report> 

<class>A 组 </class> 
<ql>50</ql><q2>70</q2><q3> 30</q3><q4>10</q4> 
</report> 

< report> 

<class>B 组 < /class> 

<ql>20< /ql>< q2> 30< /q2> < q3> 40< /q3> <q4> 50< /q4> 
</report> 

< report> 

<class>C 组 </class> 

<ql>70< /ql><q2> 40< /q2> <q3> 20< /q3> <q4> 10< /q4> 
</report> 


< /document> 
例 7.16 包含 单 选 条 件 的 XSL 文档 (tj. xsl) 。 


< ?xml version= "1.0" encoding= "GB2312"?> 

<xsl:stylesheet xmlns:xsl= "http://www.w3.0org/TR/WD- xs1"> 

<xsl:template match= "/"> 

< HTML> < HEAD> < TITLE> 2008 年 生产 统计 < /TITLE>< /HEAD> 

<BODY BGCOLOR= "# 00CC66"> < xsl1:apply- templates select= "document" /> 

< DIV ALIGN= "CENTER"> 

< form> < input type= "button" value= "关闭 本 页 " onclick= "JAVASCRIPT:window. 
close()"/>< /form> 


< /DIV> 
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< /BODY> 

< /HIML> 

</xsl:template> 

<xsl:template match= "document"> 

<H3 align= "center"> 2008 年 生产 产品 产量 统计 </H3> 

< TABLE border= "2" cellspacing= "1" bordercolor="# 6666FF"align= "center"> 
<TH> 班 组 < /TH> 

<TH> 一 季度 </TH><TH> 二 季度 < /TH><TH> 三 季度 < /TH><TH> 四 季度 < /TH> 
<xsl:apply- templates select= "report" /> 

< /TABLE> 

</xsl:template> 

<xsl:template match= "report"> 

<TR> 

<TD><xsl:value- of select= "class"/></TD> 

<TD> < xsl: apply - templates select="ql"/> </TD> < TD > < xsl: apply - templates select = 
"a2"/><VTD> 

<TD> < xsl: apply - templates select ="q3"/> </TD > < TD > < xsl: apply - templates select = 
"gq4"/>< /TD> 

</TR> 

</xsl:template> 

<xsl:template match= "ql|lq2|q3|lq4"> 

<!-- 此 处 测试 产量 ,如 小 于 等 于 20 则 添加 sTYLE 属性 color, 其 值 为 red( 红 色 )--> 
<xsl:if test=". [value() $1e$20]"> 

<xsl:attribute name= "style"> color:red< /xsl:attribute> 

< /xsl:if> 

<xsl:value- of/> 

</xsl:template> 

</xsl:stylesheet> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/tj. xml, 可 看 到 如 图 7.9 所 示 页 面 。 


7.9 使 用 不 同形 式 显示 数据 
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6. XML 单 选 条 件 判断 语句 的 结构 
XML 单 选 条 件 判 断 语 句 的 格式 为 : 


<xsl:if expr= "script- expression" language= "language- name" test= "pattern"> 
<xsl:attribute name= "style"> 属 性 : 属性 值 < /xsl:attribute> 


< /xs1:if> 

其 中 : expr 为 脚本 语言 表达 式 , 计 算 结 果 为 “ 真 ” 或 “ 假 ”; 如 果 结 果 为 *“ 真 ”, 且 通过 
test, 则 按 指定 样式 属性 输出 元 素 内 容 。test 为 源 数据 ,可 省 略 该 属性 。 

7. XML 的 多 选 条 件 判断 语句 的 应 用 


XML 的 多 选 条 件 判 断 语句 可 以 通过 多 个 条 件 表达 式 的 不 同情 况 选 择 输出 数据 的 
样式 。 
例 7.17 包含 数据 的 XML 文档 (dx. xml) 。 


< ?xml version= "1.0" encoding= "GB2312"?> 

<?xml:stylesheet type= "text/xsl" href="dx.xsl"?> 

<document> 

<grade> 

<name> 张 三 < /name> 

<english> 80< /english><math> 90< /math> < chymest> 90< /chymest> 
</grade> 

<grade> 

<name> 刘 力 < /name> 

<english> 98< /english><math> 70< /math> < chymest> 85< /chymest> 
</grade> 


</document> 
例 7.18 包含 单 选 条 件 的 XSL 文档 (dx. xsl)。 


<?xml version="1.0" encoding= "GB2312"?> 

<xsl:stylesheet xmlns:xsl= "http://www.w3.org/TR/WD- xs1"> 

<xsl:template match="/"> 

<HTML> < HEAD>< TITLE> 学 生成 绩 < /TITLE> < /HEAD> 

< BODY BGCOLOR= "# 00CC66"> <xsl:apply- templates select= "document"/> 

<DIV ALIGN= "CENTER"> 

< form> < input type= "button" value= "关闭 本 页 " onclick= "JAVASCRIPT:window. 
close()"/>< /form> 

< /DIV> < /BODY> 

< /HTML> 

</xsl:template> 

<xsl:template match= "document"> 

< TABLE border= "2" cellspacing= "1" bordercolor= "# 6666FF" align= "center"> 
<caption> 学 生 的 成 绩 单 < /caption> 
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<TH> 姓 名 < /TH><TH> 英 语 < /TH> <TH> 数 学 < /TH> <TH> 化 学 < /TH> 
<xsl:apply- templates select= "grade"/> 

< /TABLE> 

</xsl:template> 

<xsl:template match= "grade"> 

<TR> 

<TD><xsl:apply- templates select= "name"/>< /TD> 
<TD><xsl:apply- templates select= "english"/>< /TD> 
<TD><xsl:apply- templates select= "math"/>< /TD> 
<TD><xsl:apply- templates select= 
</TR> 

</xsl:template> 


"chymest"/>< /TD> 


<xsl:template match= "name"><xsl:value- of/></xsl:template> 


<xsl:template match= "english|lmath|chymest"> 
<xsl:choose> 

<xsl:when test=". [value () $gt$ 85] > 优秀 < /xsl:when> 
<xsl:when test=". [value() $gt$ 70] "> 一 般 < /xsl:when> 
<xsl:when test=". [value() $gt$ 60]"> 及 格 < /xsl:when> 
<xsl:otherwise> 不 及 格 < /xsl:otherwise> 
</xsl:choose> 

</xsl:template> 

</xsl:stylesheet> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/dx. xml, 可 看 到 如 图 7. 10 所 示 页 面 。 


图 7.10 使 用 不 同形 式 显示 数据 


8. XML 多 选 条 件 判 断 语句 的 结构 
XML 多 选 条 件 判断 语句 的 格式 为 : 


<xsl:choose> 
<xsl:when expr=" script - expression"” language =" 语 言 名 "test="pattern"> 数 据 字符 


</xsl:when> 
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<xsl: when expr=" script— expression" language=" 语言 种 * est=* pattern"> 数据 字符 


< /zxsl:when> 


<xsl:when expr= "script- expression" language= "语言 名 " test="pattern"> 数 据 字 符 < /xsl: 
when> 
<xsl:otherwise> 数 据 字符 < /xsl:otherwise> 


</xsl:choose> 


在 二 xsl:choose 二 选择 中 ,从 第 1 个 二 xsl:when 二 开始 ,逐个 测试 test 属性 值 ,直到 
满足 一 个 测试 条 件 就 将 其 中 的 内 容 输 出 ,不 再 测试 后 面 的 条 件 ;如 果 不 满足 任何 一 个 条 
件 , 则 输出 二 xsl:otherwise 二 中 的 内 容 。 

在 标记 对 一 xsl:when 二 一 /xsl:when 二 与 一 xsl:otherwise 二 一 /xsl:otherwise 二 中 可 
舱 套 使 用 二 xsl:if 之 或 二 xsl:choose 二 语句 。 


7.3 使 用 JSP 获取 XML 中 的 数据 


要 处 理 XML 文档 ,提取 或 修改 其 中 的 数据 信息 ,需要 先 对 XML 文档 进行 解析 ,识别 
出 XML 文档 的 结构 和 其 中 的 数据 ,解析 XML 文档 需要 一 些 程序 ,这 些 程序 称 为 XML 
解析 器 ,XML 文档 最 基本 的 解析 器 有 两 种 .分别 是 文档 对 象 模型 (DOM, 它 是 Document 
Object Model 的 缩写 ) 和 XML 解析 的 简单 APICSAX) ,它们 在 本 质 上 都 是 一 种 Java 的 
接口 。 

本 节 主 要 介绍 JSP 如 何 使 用 DOM 获取 XML 中 的 数据 。 


7.3.1 记录 数据 的 XML 文档 
例 7.19 包含 5 条 个 人 履历 记录 的 XML 文档 (jspxml. xml)。 


<?xml version="1.0" encoding= "GB2312"?> 

<!-- 个 人 履历 表 - -> 

< resume> 

<person id= "01"> 
<name> 张 三 < /name> 
<birthday> 03/24/1975< /birthday> 
<Phone> 1111- 1111< /phone> 
<address> 大 连 < /address> 

< /person> 

<person id="02"> 
<name> 李 四 < /name> 
<birthday> 9/26/1978< /birthday> 
<phone> 2222- 2222< /phone> 
<address> 南 京 < /address> 

< /person> 


< Person id= "03"> 
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<name> 王 五 < /name> 
<birthday>11/09/1979< /birthday> 
<phone> 3333- 3333< /phone> 
<address> 武 汉 < /address> 

< /person> 

<person id= "04"> 
<name> 赵 六 < /name> 
<birthday> 6/04/1973< /birthday> 
<phone> 4444- 4444< /phone> 
<address> 青 岛 </address> 

< /person> 

<person id= "05"> 
<name> 陈 七 < /name> 
<birthday> 12/19/1977< /birthday> 
<phone> 5555- 5555< /phone> 
<address> 上 海 < /address> 

< /person> 


< /resume> 


7.3.2 创建 包含 DOM 解析 器 的 JavaBean 


1. 创建 JavaBean 


例 7.20 包含 DOM 解析 器 的 Java 文档 (MyDOMBean. java)。 


package test; 


import org.xml.sax. 关 了 
import Javax.xml.Parsers. 关 了 
import org.w3c.dom. 关 了 


import java.io.*; 


public class MyDOMBean implements java.io.Serializable { 
private static String xmlStr=""; 
private static final String PATH= "file:///"; 


public MyDOMBean() { } 
public String getString (){ return xmlSstr; } 


public static Document getDocument (String filename) throws Exception { 
xmlstr=""; 
DocumentBuilderFactory dbf= DocumentBuilderFactory.newInstance () 7 
//setIgnoringComments (true) 方 法 指定 由 此 代码 生成 的 解析 器 将 忽略 注释 


qdbf.setIgnoringComments (true); 


2l4 。 


// 该 方法 指定 由 此 工厂 创建 的 解析 器 在 解析 2 文档 时 ,必须 删除 元 素 内 容 中 的 空格 
dbf.setIgnoringElementContentWhitespace (true); 

DocumentBuilder db= dbf .newDocumentBuilder (); 

// 导 入 zaE 文 件 


Document doc= db .parse (PATH+ filename); 


return doc; 


public void traverseTree (Node node) throws Exception { 
if(node==null) { return; } 
int type=node.getNodeType (); // 获 得 节点 类 型 值 


switch (type) { 
//handle document nodes, 当 Node .DOCUMENT NODE=9 
case Node .DOCUMENT NODE: { 
xmlstrt="<tr>"; 
// 使 用 getDocumentElement () 获 取 根 元 素 
travVerseTree ( ( (Document)node) .getDocumentElement () ) > 
break; 


} 
//handle element nodes, 当 Node .ELEMENT NODE=1 


Case Node .ELEMENT NODE: { 
String elementName= node .getNodeName (); // 获 取 元 素 名 称 
if (elementName .equals ("person")) // 如 果 是 根 元 素 
{ 
xmlstrt+="</tr><tr>"; 
} 
// 获 取 指 定子 元 素 列 表 
NodeList childNodes=node.getChildNodes () 7 
if(childNodes!=null) { 
int length= childNodes.getLength(); // 子 节点 的 个 数 
for (int loopIndex=0; loopIndex< length;loopIndex++) 
traverseTree (childNodes.item(loopIndex)); 


// 获 取 子 元 素 列 表 中 的 元 素 


} 
break; 


} 
//handle text nodes, 当 Node.TEXT NODE=3 


Case Node.TEXT NODE: { 
// 获 取 节 点 的 值 ,trim() 用 来 返回 字符 串 并 去 掉 前 后 空白 


String data= node .getNodeValue () .trim(); 
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if((data.indexOof(" ")<0) && (data.length()>0)) { 
xmlSstrt+="<td>"+datat "</td>"; 
} 


} 


MyDOMBean. java 创建 了 一 个 类 MyDOMBean, 它 实现 了 java. io. Serializable 接口 
可 以 启用 其 序列 号 化 功能 。 

它 包 含 2 个 具有 返回 值 的 方法 ,一 个 是 getString() 方 法 返回 字符 串 数据 ,一 个 是 
getDocument() 方 法 返回 Document 对 象 。 还 有 一 个 traverseTree(Node node) 方 法 用 来 
获取 XML 文档 中 各 个 节点 的 值 。 


2. 知识 点 归纳 
1) 引入 需要 的 包 
因为 所 创建 JavaBean 需要 使 用 Sun 所 提供 的 XML 解析 器 ,因而 需要 引入 javax. 


xml. parsers 包 ,其 中 包含 了 DOM 解析 器 和 SAX 解析 器 的 程序 。 还 要 引入 org. w3c. 
dom 包 ,其 中 定义 了 w3c 所 制定 的 DOM 接口 。 在 Java 文档 的 开头 引入 了 这 两 个 包 。 


import Javax.xml.Parsers. 关 了 
import org.w3c.dom. 关 了 


2) 创建 解析 器 工厂 与 解析 器 对 象 

使 用 DocumentBuilderFacotry 类 是 为 了 创建 一 个 解析 器 工厂 对 象 , 然 后 根据 解析 器 
工厂 创建 出 解析 器 对 象 ,使 用 DocumentBuilderFactory 类 的 静态 方法 newInstance() 可 
以 创建 出 一 个 解析 器 工厂 对 象 。 通 过 DocumentBuilderFactory 类 的 静态 方法 
newDocumentBuilder() 方 法 可 以 创建 出 一 个 具体 的 解析 器 对 象 。 


DocumentBuilderFactory dbf= DocumentBuilderFactory.newInstance () 7 


DocumentBuilder db= dbf.newDocumentBuilder (); 


3) 创建 解析 XML 文档 的 DOM 对 象 树 

通过 解析 器 对 象 的 parse(PATH 十 filename) 方 法 ,可 以 对 指定 的 XML 文档 进行 解 
析 ,并 返回 一 个 对 应 XML 文档 树 型 结构 的 Document 对 象 ,这 个 Document 对 象 按 树 模 
型 保存 了 XML 文档 的 数据 元 素 。 


Document doc=db.parse (PATH+ filename) 7 


4) 通过 Document 对 象 与 节点 类 Node 获取 DOM 对 象 树 中 的 值 

通过 Node 类 的 getrNodeType() 方 法 返回 节点 类 型 值 ,节点 类 型 主要 有 3 种 : 
DOCUMENT_NODE 节点 ,其 值 为 9;ELEMENT_NODE 节点 ,其 值 为 1;TEXT_NODE 
节点 ,其 值 为 3。 


In2l6 。 


通过 Document 对 象 的 getDocumentElement() 方 法 可 以 获取 根 元 素 ; 通 过 NodeList 
类 的 getChildNodes() 方 法 可 以 得 到 子 节点 列表 ;通过 Node 类 的 getNodeName() 方 法 可 
以 得 到 节点 的 名 称 ;通过 Node 类 的 getNodeValue() 方 法 可 以 得 到 节点 的 值 。 


7.3.3 创建 获取 XML 值 的 JSP 文档 
例 7.21 输出 XML 数据 的 JSP 文档 (jspxml. jsp) 。 


<html> 
<head> 
<title> 使 用 DoM 解 析 器 < /title> 
< /head> 
<%Q@page import= "org.w3c.dom. * "多 > 
<$%@page contentType= "text/html;charset=GB2312" %> 
<body bgcolor= "# CEF1E1"> 
<center> 
<h2> 个 人 履历 表 (DoM 版 )< /h2> 
<table border= "1" width= "80% "> 
<tr> 
<td> 姓 名 < /td> 
<td> 出 生年 月 < /td> 
<td> 电 话 号 码 < /td> 
<td> 居 住地 < /tq> 
</tr> 
<jsp:useBean id= "domparser" class= "test .MyDOMBean" /> 
<% 
Document doc= domparser .getDocument (request .getRealPath ("/")+ "myjsp/jspxml .xml"); 
domparser .traverseTree (doc); 
out .print (domparser.getSstring()); 
> 
< /body> 
< /html> 


在 浏览 器 中 输入 http://localhost:8080/myjsp/jspxml. jsp, 可 看 到 如 图 7. 11 所 示 
页 面 。 

jspxml. jsp 很 简单 , 它 只 是 调用 了 MyDOMBean 对 象 的 三 个 方法 ,通过 getDocument 
(filename) 方 法 得 到 一 个 对 应 XML 树 型 结构 的 Document 树 型 对 象 , 它 将 XML 数据 读 
入 树 型 结构 并 存储 在 内 存 中 ;通过 traverseTree(doc) 方 法 将 XML 数据 转换 为 字符 串 ; 通 
过 out. print 方法 在 JSP 页 面 上 显示 用 getString() 方 法 得 到 XML 数据 字符 串 。 

当 XML 文档 较 大 时 ,使 用 DOM 解析 器 解析 速度 会 慢 ,效率 低 。 这 时 可 以 使 用 SAX 
解析 器 , 它 在 解析 XML 文档 时 ,从 XML 文档 开始 位 置 进行 解析 ,同时 会 根据 定义 好 的 事 
件 处 理 器 对 象 判 断 当 前 所 解析 的 成 分 (元 素 、 属 性 或 字符 数据 ) 是 否 需要 记录 与 存储 。 

SAX 解析 器 在 javax. xml. parsers 包 中 ,有 兴趣 的 读者 可 以 通过 SAXParserFactory 
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「 着 代 站 DOM 诅 析 医 - Windows Internet Explorer ee 
加 - 司 httpy//localhost:s080/myjsp/jspxml, -IX | Gope A- 
帘 喧 | 固 使 用 poM 解 析 器 :从 - 园 -各 -二 ID 过 IO 

个 人 履历 表 〈DOM 版 ) 
隆 名 出 生年 月 电话 号 码 局 住地 
三 03/24/1975 1111-1111 | 大连 
座 四 9/26/1978 2222-2222 南京 
压 坪 [1/09/1979 3333-3333 武汉 
正六 |6/04/1973 4444-4444 青鸟 
陈 七 12/19/1977 5555-5555 | 上 海 


图 7.11 通过 JSP 输 出 XML 文档 数据 


与 SAXParser 类 创建 一 个 具体 的 SAX 解析 器 。 


7.4 使 用 JDOM 处 理 XML 中 的 数据 


JDOM 是 一 个 开源 项 目 , 它 基于 树 型 结构 ,利用 纯 Java 技术 对 XML 文档 实现 解析 、 
生成 .序列 化 等 操作 。JDOM 利用 Java 的 特性 ,把 ASX 和 DOM 的 功能 有 效 地 结合 起 
来 。 因 此 ,只 要 有 一 个 JDOM 的 jar 包 , 就 可 以 在 Java 程序 中 ,使 用 JDOM 来 实现 对 
XML 数据 的 处 理 。 

本 节 的 内 容 主要 介绍 如 何在 MyEclipse 中 使 用 JDOM 生成 XML 文档、 修改 XML 
文档 中 的 数据 。 


7.4.1 在 MyEclipse 中 添加 JDOM 的 jar 软件 包 
1. 下 载 JDOM 的 jar 软件 包 


在 JDOM 的 官方 网 站 http://www. jdom. org/dist/binary/ 下 载 jdom-1. 1. zip 软件 
包 , 如 图 7.12 所 示 。 


2. 确定 JDOM 的 jar 软件 包 的 位 置 


下 载 完 毕 后 ,将 其 解压 缩 , 解 压缩 后 的 “jdom. jar” 文 件 即 JDOM 的 jar 软件 包 在 其 
build 子 文件 夹 中 ,如 图 7. 13 所 示 。 


3. 在 MyEclipse 中 加 载 JDOM 的 jar 软件 包 


在 MyEclipse 中 加 载 JDOM 的 jar 软件 包 的 操作 步骤 如 下 所 述 ( 需 要 先 安装 好 
MyEclipse 软件 ) 。 

(1) 在 Windows 界面 选择 “开始 ”所 有 程序 ”~MyEclipse 命令 ,打开 MyEclipse 
的 工作 界面 ,如 图 7.14 所 示 。 
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Last modified Description 


Parent Director 

archive/ 18-Nov-2007 
dom-1.1.tar.gz 13-Nov-2007 
dom-1.1.zi 13-Nov-2007 
idom-contrib-1.1.tar.gz 13-Nov-2007 
dom-contr ib-1.1.21) 13-Nov-2007 


dom-cesc-1.1.car.gz 13-Nov-2007 


位 
@ 
心 
心 
心 
心 
申 
必 


dom-cesc-1.1.zi 13-Nov-2007 


samples 2007/11/14 2:16 
回 jdom 2007/11/14 2:16 Executable Jar File 


jdom-11 
则 build 
etc 
lb 
BB package 


图 7.13 jdom. jar 文 件 目录 


je ps 
帮 全 相间" 昌 记 码 太 "-O-7%- 央 者 @@- 
.区 =@ ~ 量 - 只 人 号 ~ 
B Package Explorer 3 = = 5) outine 3 于 = 
富 呆 和 蝶 | 晶 为” |An outline is not available. 
田 仿 Test 


Used with the visual Editor for Java 


图 7.14 MyEclipse 的 工作 界面 
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(2) 在 菜单 栏 选择 File-~New-~Project 命令 ,打开 New Project 对 话 框 ,如 图 7. 15 所 
示 。 从 中 选择 Java 一 Java Project, 然 后 单 击 Next 按钮 。 


Select a wizard 
Create a Java project 


Wizards: 

type filter text 

CVS 

外- Edipse Modeling Framework 


一 于 Java Project from Existing Ant Buildfile 


BE MyEdipse 
| ©- J2EE projeds 
万 EJB projed 


CR 


图 7.15 选择 建立 Java 工程 


(3) 在 New Java Project 对 话 框 的 Project name 文本 杠 中 输入 工程 名 称 ,例如 


JDOMLX, 如 图 7. 16 所 示 , 之 后 单 击 Finish 按钮 。 在 工作 界面 可 以 看 到 新 创建 的 工程 项 
目 , 如 图 7.17 所 示 。 


Create a Java project 


| create a Java project in the workspace or in an external location. 


Project name: JDOMLX 
Contents 


@ |Create new project in workspacel 
© create project from existing source 


Directory: [CsshaolpvworkspaceVDOMLX 


JRE 

@® Use default JRE (Currently \jre1.6.0.037 

© Use a project specific JRE: 
Project layout 


@ Use project folder as root for sources and dlass files 
© create separate source and output folders 


[<Back | Net> | 


7.16 定义 工程 名 称 
Jazo = 


二 口 | 时 outline 2 | 
An outline is not available. 


一 一 Properties | Ya Java Beans 2 二 
Pr |Ta- | 目 co- 3 八 二 口 jjused with the Visual Editorfor java 

No consoles to display at this tm 
Hr 


i JRE System Library lire1.6.0.03] - JDOMLX 


图 7.17 新 创建 的 工程 项 目 


(4) 右 击 工程 名 JDOMLX, 在 弹出 的 快捷 菜单 中 选择 Properties 菜单 命令 , 打开 
Properties for JDOMLX 对 话 框 ,如 图 7. 18 所 示 。 在 左边 框 中 选择 Java Build Path 选 
项 ,在 中 间 框 中 选择 Libraries 标签 ,在 右边 单 击 Add External JARs 按钮 ,打开 JAR 
Selection 对 话 框 , 如 图 7. 19 所 示 , 从 中 选择 解压 缩 后 的 jdom. jar 软件 包 , 然 后 单 击 “ 打 
开 ” 按 钮 。 


贸 Properties for J E> 
| 
| ype filter text Java Build Path ro 
Info 
‘~Beaninfo Path [source [Sproledts| ™ Ubraries 
Fes JARs and dass folders on the build path: 
a En mh JRE System Lbrary Ure1.6.0_.03] Ed 
外- Java Compiler [add External JARs.. | 
Javadoc Location 
JSF Library Referenc' [Addxvariable | 
JSp Fragment 一 一 
| -profle Compliance a | 
(Project References [Edd dless Folderw | 
‘~ Refactoring History 
Server Edit... 
Task Tags 
Validation OO 
Web Content Setting 
Migrate JAR File... 


@ Ce |) (cues 


图 7.18 Properties for JDOMLX 对 话 框 


(5) 完成 以 上 步骤 后 ,会 在 Libraries 标签 栏 中 看 到 jdom. jar, 如 图 7. 20 所 示 。 说明 
软件 包 导 入 成 功 。 单 击 OK 按钮 .结束 加 载 JDOM 的 jar 软件 包 的 工作 。 
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大 JAR Selection 


BB « jdom-11 » build » >| 九 咱 状 关 nD 
| 
收藏 夫 链 接 名 称 | 修改 日 期 。 “类 型 大 小 » 
广 杠 samples 
dom 
各 最 i 访 问 的 位 置 TE 
更 多 >》 
文件 实 pe 
Bconfiguration ^ 
看 features 
B links 
加 plugins 
攻 readme 
晶 Java 使 用 的 软件 
而 jdom-11 
下 buid 四 
文件 名 四: jdom ”Eesti 了 | 


图 7.19 选择 要 添加 的 jdom. jar 文件 


type filter text Java Build Path 
Info 


Beanimfo path [source [Sprojedts| A tibraries [BorderandEport| 


Builders JARs and class folders on the build path: 


Java Build path 说 jdomjar - CNjavaWava 使 用 的 软件 jdom-1.1\build 


Java Code Style 
四 -mi JRE System Library ljre1.6.0.03) 
Java Compiler nh 9 


Javadoc Location 
JSF Library Referenc' 
JSP Fragment 
profile Compliance a 
Project References 
Refactoring History 
Server 

Task Tags 
Validation 

一 Web Content Setting 


Migrate JAR File... 


7.20 导入 的 jdom. jar 


7.4.2 使 用 JDOM 生成 XML 文档 


创建 XML 文档 的 过 程 如 下 : 
(1) 在 MyEclipse 工作 界面 右 击 工程 名 JDOMLX. 在 弹出 的 快捷 菜单 中 选择 New 一 
Class 命令 ,打开 New Java Class 对 话 框 ,如 图 7. 21 所 示 。 在 Name 文本 框 输入 类 名 


几 22 到 


JXML ,并 选择 public static void main(String[ ] args) 选 项 。 然 后 单 击 Finish 按钮 。 将 打 
开 编 写 Java 程序 的 窗口 ,如 图 7. 22 所 示 。 


New Java 


Java Class 
[A The use of the default package is discouraged. 9 


Source folder: JDOMLX Eeeewse- | 
Package: (defaulb [arowse- | 


加 Endosing type: [ Browse... | 
Name: JXML 
Modifiers: @ public ©defaut Oprivate © proteced 


回 abstrad 回 final 口 static 


Superclass: javaJang.Dbjedt 


Interfaces: (Ade 
[Bemove | 


Which method stubs would you like to create? 
园 public static void main(stringl] args) 
回 constructors from superdass 
贺 Inherited abstract methods 
Do you want to add comments as configured in the properties of the current project? 
回 Generate comments 


@ Cnish 一] Ecoe] 


图 7.21 New Java Class 对 话 框 


WEcipse Java 一 
[Elo Edit Source Rofactor Navigato Soarch projed MyEdipse Run Wincow Holp | 
jc 回国 锚 林 合用 "名 二; 女 "OW 由 G7 7B le : 国 B 回 » s 
i@ 其 ~- 制 ~- 中信 -中 - 
package Exploror SS 号 可 王 outne 吕 二 
守 史 外 |B 多” 名 sew 
oom | pe class x ( ee 
| 自 电 tdofauk package) Le es mantstinglD) 
| | nD NMJave * eparam args 
| -a JRE system Library [re1.6.0.(| “/ 
， 田 - 蚁 jdomjar - CAjavaWara 使 用 的 | publio statio void rain(string[] arge) | 
Th 2 // TODO Auto-gererated wethod stub 
properties| 外 ljava Beans 3 SEE 


Used with the Visual Edtorfor Java 


Problems|Tasks| 园 console 33 加 -0 
No consoles to display at this dme. 


i Writable SmartInsert | 1:1 


图 7.22 编写 Java 程序 的 窗口 
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(2) 在 JXML. java 视图 窗口 输入 如 下 代码 。 


import java.io.* 3; 


import org.jdom.* ; 


import org.jdom.output.*; 


public class JXML{ 
// 声 明 2 中 所 有 的 元 素 


Element customer,name,age, sex,address,street,city,district; 


public JXML(){ 


Nma2 4 。 


// 创 建 customer 元 素 , 并 设置 为 RE 文档 的 根 节点 
customer=new Element ("customer"); 


Document myDocument= new Document (customer); 


// 创 建 文档 中 的 其 他 元 素 , 并 初始 化 元 素 名 
name= new Element ("name") 7 

age= new Element ("age") 7 

sex=new Element ("sex"); 

address=new Element ("address"); 
street=new Element ("street"); 

city=new Element ("city"); 


district=new Element ("district"); 


// 给 :ac 文档 中 的 每 一 个 元 素 添加 字符 数据 
name .addCcontent (" 王 宏 "); 

age.addContent ("24"); 

sex.addContent (" 男 "); 

street .addCcontent ("交大 东 路 11 号 "); 
district.addcontent ("海淀 区 "); 
city.addcontent ("北京 "); 


// 将 street、district 和 city 元 素 作 为 子 元 素 ,添加 到 addqress 元 素 中 
address .addContent (street); 

address.addContent (district); 

address.addContent (city); 


// 将 address 元 素 作为 子 元 素 ,添加 到 customer 根 元 素 中 
customer .addContent (name); 

Customer .addContent (age) > 

customer -addqContent (Sex) 7 


Customer .addContent (address) > 


tryt{ 


// 创 建 RE 文件 输出 流 


XMLOutputter fmt=new XMLOutputter () 7 


// 创 建文 件 输出 流 


FileWriter writer=new FileWriter ("LX.xml"); 


// 设 置 所 创建 的 an 文档 的 格式 
Format f=Format .getPrettyFormat (); 
fmt .setFormat (f); 


// 将 生成 的 区 上 文档 写 人 到 "customer.xml" 文 件 中 
fmt .output (myDocument, writer); 
writer.close(); 


} 
catch (Exception e) {e.printstackTrace ();} 


} 
public static void main(String[]args) {new JXML();} 


} 

(3) 在 工具 栏 单 击 Run 运行 按钮 加 或 在 工程 项 目 中 ,选择 JXML. java, 右 击 鼠 标 , 在 
弹出 的 快捷 菜单 中 选择 Run As 一 Java Application 命令 ,如 图 7. 23 所 示 , 将 在 
C:\shaolp\workspace\JDOMLX 路 径 下 看 到 一 个 生成 的 LX. xml 文件 ,打开 文件 可 以 看 
到 其 中 的 内 容 如 图 7. 24 所 示 。 


i 大 @ 可 有 -i -OY BO- 四 7B EGG- 
Ne Run JXML 
二 package Explorer 53 


Outine 33 le) 


之 忠生 | 日 名 ”了 | 图 Simport java.10.*:| 二 国 W ow” 


import org.Jdom. *: 
日 B JDOMLK 
ff import org.jdcm- 
白 - 嘱 (default package) gjdom-oucpur， 


得 Import dedaratol 
+ jaior 

2 orgjdom> 

+ orgjdom.ol 
©, IXML 

©° XMLO 


日 poblic JxmL 0)t ec 
// 创建 customer 元 素 ， 并 设置 为 XL 文档 的 根 节点 i na 


customer = new Element ("customer"); = 
Documenr myDocumenc = new Document (customer); pro- | Jav- 忆 口 


由 - 国 XMLiava publio class JXMLC | r 
-mh JRE System Library [jre1.| // 元 明 xHL 中 所 有 的 元 素 | 
四 - 司 jdomjar - csjavavava 人 | Element customer, name,age, sex,address,street,city,distric 上 


自 恒 Test 


基 他 元 雪 ， 并 初 络 化 元 ea 
Me mn et nee 的 和 eed wh the Visual Eor 
age = new Element ("age"); [de 
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Sees ne Eien radaresen); 


Problems | Tasks [是 console 忌 覃 其 萄 | 芭 团 | 虽 日" 品 " 二 口 
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图 7.23 运行 Java 程序 


Wi 
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司 [x- 记事 本 
文件 口 “ 编 缉 四 ” 格 z(O) 看 看 GO 帮助 t) 
《<9xml version=“1.0”encoding=“UTF-8“9> ~ 
<customer> 
<name> 王 宏 </name> 
<age>24</age> 
<sex> 男 </sex> 
<address> 、 
《street> 交 大 东 踊 11 号 </street> 
《district》 海 演 区 </district> 
<city> 北 京 </city> 
</address> 
<Vcustomer> 


了 


图 7.24 通过 Java 程序 生成 的 LX. xml 文档 


7.4.3 使 用 JDOM 处 理 XML 中 的 数据 


例 7.22 一 个 能 对 XML 文档 进行 修改 、 删 除 、 添 加 新 元 素 、 属 性 的 Java 文件 
(Mxml. java)。 


源 代码 如 下 : 


import org.jdom. *; 
import org.jdom.output.*; 
import java.io. 关 了 
import java.util.List; 
import org.jdqom.input. 关 了 
public class MXML { 
Document doc; 
List list; 
public MxML () { 


try { 
SAXBuilder sb=new SAXBuilder () 7 
doc= sb.build ("LX.xml"); // 通 过 文件 构造 一 个 Document 
Element root= doc.getRootElement (); // 得 到 根 元 素 
list= root .getChildren()7 // 获 得 文档 根 节点 元 素 下 的 全 部 子 节点 元 素 


// 利 用 循环 来 处 理 全 部 子 节点 元 素 
for (int i=0;i<list.size();i++) { 
// 获 得 其 中 一 个 字 节点 元 素 
Element element= (Element)]l1ist.get (i); 
String nodeName=element .getName (); // 获 得 该 子 节 点 元 素 名 
// 当 所 获得 的 子 元 素 名 为 "address" 时 的 处 理 
if (nodeName .equals ("address")) i 
// 添 加 子 元 素 "country", 并 设置 其 内 容 为 "中 国 " 
Element country=new Element ("country"); 
country.addcontent ("中 国 "); 


element .addContent (country); 


// 修 改名 为 "street" 的 子 元 素 内 容 
W226 。 


Element street= element .getChild("street"); 

street.setText ("北京 交通 大 学 东 路 11 号 "); 

// 为 street 添加 属性 

Attribute a=new Attribute ("市 区 ","true"); 

street.setAttribute (a); 

element .removeChild ("district"); // 删 除名 为 "district" 的 子 元 素 


// 创 建 ar 文件 输出 流 

XMLOutputter fmt=new XMLOutputter (); 

// 创 建文 件 输出 流 

FileWriter writer=new FileWriter ("LX.xml"); 
// 设 置 所 创建 的 :at 文档 的 格式 

Format f=Format .getPrettyFormat () 7 


fmt .setFormat (f); 
fmt .output (doc, writer); // 将 生成 的 :ad 文档 写 入 文件 中 


writer.close ()7 


+ 
catch (Exception e) {e.PrintStackTrace ();} 


} 
public static void main (String[] args) {new MXML();} 


} 


程序 中 有 注释 ,可 以 了 解 JDOM 的 方法 。 
运行 Mxml. java 可 以 看 到 修改 后 LX. xml 文件 内 容 如 图 7. 25 所 示 。 


《Pxml version="1.0” encoding="UTF-8”?> 
《customer> 

<name> 王 宏 </name> 

<age>24</age> 


《sex> 男 </sex> 
《address> 
《street 市 区 = "true “> 北京 交通 大 学 东 路 11 号 </street> 
《city> 北 京 </city> 
<country> 中 国 </country> 
</address> 
/customer> 


了 


图 7.25 通过 Java 程序 修改 的 LX. xml 文档 


XML 应 用 很 多 ,例如 ,Tomcat 通过 conf 文件 夹 中 的 配置 文件 server. xml 可 以 定义 
其 服务 器 的 各 种 参数 ,在 过 host 二 所 /host 二 标记 中 ,添加 下 面 的 语句 可 以 增加 一 个 虚拟 


目录 。 
< Context path= "/1p" docBase= "c:\1p" debug= "0" reloadable= "true"> < /Context> 
在 conf 文件 夹 中 的 用 户 管理 文件 tomcat-users. xml 中 ,可 以 看 到 如 下 内 容 , 表 示 当 


前 tomcat 有 一 个 用 户 : 
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<?xml version="1.0' encoding= 'utf- 8'?> 
<tomcat— users> 
<role rolename= "manager"/> 
<role rolename= "admin"/> 
<user username= "lpshao" password= "" roles= "admin,manager"/> 


< /tomcat- users> 


XML 的 其 他 应 用 及 用 途 ,希望 读者 通过 实践 去 发 现 与 体会 。 


7.5 思考 与 练习 


7.5.1 思考 题 


7-1 XML 有 什么 特点 ? 

7-2 XML 有 什么 作用 ? 

7-3 XSL 样式 文件 有 什么 特点 ? 
7-4 如 何 运行 与 使 用 XML 文件 ? 


7.5.2 上 机 练习 


7-1 使 用 FrontPage 2003 编写 具有 良好 格式 的 “图 书 基本 信息 ”的 XML 文档 ,至少 
包括 两 本 图 书 基本 信息 。 

7-2 ”使 用 软件 工具 “记事 本 ”编写 “班级 同学 成 绩 " 的 XML 文档 ,其 中 要 包括 三 门 课 
程 成 绩 , 使 用 FrontPage 2003 检查 文档 ,使 其 具有 良好 格式 。 

7-3 为 编写 好 的 “班级 同学 成 绩 ”" 的 XML 文档 编写 XML Schema 文档 ,使 用 
FrontPage 2003 检查 XML Schema 文档 ,使 其 具有 良好 格式 。 

7-4 编写 一 个 CSS 文档 用 于 在 浏览 器 中 显示 “班级 同学 成 绩 ” 的 XML 文档 。 

7-5 编写 三 个 XSL 文档 用 于 在 浏览 器 中 用 不 同方 式 显 示 “ 班 级 同学 成 绩 ”"”XML 文 
档 中 的 数据 。 

7-6 ”编写 一 个 JavaBean, 创 建 DOM 解析 器 并 编写 根据 “班级 同学 成 绩 ” 的 XML 文 
档 生成 Document 对 象 的 方法 、 得 到 XML 中 所 有 数据 字符 串 的 方法 、 得 到 数据 字符 串 的 
方法 : 

7-7 ”编写 一 个 JSP 文档 ,通过 上 题 创建 的 JavaBean 显示 “班级 同学 成 绩 "XML 文档 
中 的 所 有 数据 。 

7-8 ( 选 做 ) 编 写 一 个 JavaBean ,创建 SAX 解析 器 并 编写 根据 “班级 同学 成 绩 ” 记 录 
大 于 80 分 的 课程 成 绩 ,通过 JSP 文件 在 浏览 器 中 显示 。 

7-9 ”下载 并 安装 Eclipse 与 MyEclipse, 在 MyEclipse 添加 JDOM 的 jar 软件 。 

7-10 使 用 MyEclipse, 通 过 JDOM 编写 一 个 生成 XML 文档 的 Java 文件 。 

7-11 使 用 MyEclipse, 通 过 JDOM 编写 一 个 读 、 修 改 、 删除. 添加 XML 文档 中 的 数 
据 的 Java 文件 。 


jwmzzs . 
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MVC 模式 的 Java Web 应 用 程序 


MVC 是 一 种 目前 广泛 流行 的 软件 设计 模式 , 早 在 20 世纪 70 年 代 , IBM 开始 了 
MVC 设计 模式 的 研究 。 近 来 , 随 着 J2EE 的 成 熟 , 它 正在 成 为 在 J2EE 平台 上 推荐 的 一 种 
设计 模型 ,也 是 广大 Java 开发 者 非常 感 兴趣 的 设计 模型 。 随 着 网 络 应 用 的 ee 
MVC 模式 对 于 Web 应 用 的 开发 无 疑 是 一 种 非常 先进 的 设计 思想 ,无 论 选择 哪 种 语言 ， 
论 应 用 多 复杂 , 它 都 能 在 理解 分 析 应 用 模型 时 提供 最 基本 的 分 析 方 法 ， pe 
提供 清晰 的 设计 框架 ,为 软件 工程 提供 规范 的 依据 。 

本 章 主 要 解决 以 下 问题 ， 

。 什么 是 MVC; 

。 在 Java Web 应 用 中 “模型 "(MD) 模 块 由 什么 组 成 ; 

。 在 Java Web 应 用 中 “控制 器 ”"(C) 模 块 由 什么 组 成 ; 

。 在 Java Web 应 用 中 “视图 ”(V) 模 块 由 什么 组 成 ; 

。 如 何 使 用 MyEclipse 编写 Java Web 应 用 中 相关 的 程序 文件 。 


8.1 什么 是 MVC 


MVC 是 英文 Model-View-Controller 的 缩写 。 它 是 解决 通用 的 应 用 程序 的 基本 方 
法 。 它 不 是 算法 而 是 应 用 程序 的 组 织 原则 。 


本 节 的 内 容 主要 介绍 MVC 的 基本 原则 与 作用 。 
8.1.1 MVC 的 基本 原则 


MVC 设计 模式 基本 原则 即 要 求 应 用 程序 按照 它们 的 功能 进行 分 离 , 使 用 不 同 的 应 
用 程序 实现 数据 输入 、 处 理 和 输出 功能 。 根 据 这 个 基本 原则 ,应 用 程序 被 分 成 三 个 模块 : 


模型 (model) 、 视 图 (view) ,控制 器 (control)。 它 们 各 自 有 不 同 的 功能 ,由 不 同 角 色 去 处 
理 各 自 的 功能 。 


1. 模型 .视图 与 控制 器 的 功能 
在 MVC 设计 模式 中 ,模型 是 实现 控制 数据 访问 与 数据 处 理 功 能 的 应 用 程序 。 视 
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图 是 实现 采集 用 户 输入 的 数据 并 传递 给 控制 器 ,或 输出 控制 器 中 的 处 理 数据 给 用 户 功 
能 的 应 用 程序 。 控 制 器 是 实现 模型 与 视图 之 间 的 数据 流向 与 数据 转换 功能 的 应 用 
程序 。 


2. 模型 .视图 与 控制 器 的 约束 条 件 


视图 只 能 通过 控制 器 从 模型 中 取得 数据 ;控制 器 要 通过 良好 定义 的 ,标准 化 的 方式 来 
与 视图 和 模型 进行 通信 。 
按照 MVC 设计 模式 基本 原则 的 要 求 . MVC 具备 如 图 8. 1 所 示 的 结构 。 


控制 器 


数据 转换 
控制 流 


数据 库 


图 8.1 MVC 的 结构 


8.1.2 MVC 的 作用 


MVC 设计 模式 有 助 于 将 应 用 程序 分 割 成 若干 个 逻辑 模块 ,使 程序 设计 变 得 更 加 容 

易 。 多 个 视图 能 共享 一 个 模型 ,可 以 使 用 控制 器 来 联接 不 同 的 模型 和 视图 去 完成 用 户 的 
需求 ,这 样 控制 器 可 以 为 构造 应 用 程序 提供 强 有 力 的 手段 。 给 定 一 些 可 重用 的 模型 和 视 

图 ,控制 器 可 以 根据 用 户 的 需求 选择 模型 进行 处 理 , 然 后 选择 视图 将 处 理 结果 显示 给 用 
户 。 使 用 MVC 设计 模式 可 以 降低 软件 系统 (模块 ) 的 耦合 度 ,提高 软件 系统 的 可 维护 性 
与 健壮 性 。 

但 使 用 MVC 需要 精心 的 计划 , 花费 相当 可 观 的 时 间 去 考虑 如 何 将 MVC 运用 到 应 
用 程序 中 ,同时 由 于 模型 和 视图 要 严格 的 分 离 ,将 一 个 应 用 程序 分 成 了 三 个 模块 ,所 以 使 
用 MVC 同时 也 意味 着 你 将 要 管理 比 以 前 更 多 的 文件 ,同时 给 调试 应 用 程序 带 来 了 一 定 
的 困难 ,每 个 模块 在 使 用 之 前 都 需要 经 过 彻底 的 测试 。 因 此 ,MVC ed 
等 规模 的 应 用 程序 ,花费 大 量 时 间 将 MVC 应 用 到 规模 并 不 是 很 大 的 应 用 程序 通常 会 
不 偿 失 。 


8.1.3 JSP/Servlet 的 三 层 体系 结构 


基于 Java 技术 的 Web 应 用 系统 通常 采用 Browser/ Web/DataBase 的 三 层 体系 结构 ， 
如 图 8.2 所 示 。 

Web 服务 器 接受 请 求 , 通 过 应 用 程序 服务 器 执行 一 个 Java 服务 器 端 小 程序 Servlet 
并 返回 其 输出 ,从 而 实现 与 客户 机 进行 信息 资源 的 交互 。 数 据 库 服务 器 用 来 存储 应 用 系 
统 中 所 用 到 的 各 种 数据 ,数据 由 数据 库 管理 程序 直接 录入 。 应 用 系统 的 客户 端 只 需要 一 
个 浏览 器 即 可 。 用 户 通 过 浏览 器 来 查询 、 增 加 、 修 改 、 删 除数 据 ,对 数据 库 中 的 数据 信息 进 
行 管理 。 
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客户 机 


| Http 
服务 器 
Browser 六 


浏览 器 Web 应 用 程序 服务 器 
Servlet 容 器 
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图 8.2 基于 Java 技术 的 Web 应 用 体系 结构 


8.1.4 在 Browser/Web/DataBase 中 间 层 上 采用 的 MVC 设计 模式 


在 大 多 数 Browser/ Server 结构 的 Web 应 用 中 ,浏览 器 直接 通过 HTML 或 者 JSP 的 
形式 与 用 户 交 互 ,响应 用 户 的 请 求 。 虽 然 很 直观 ,但 是 大 多 数 应 用 系统 操作 的 数据 量 都 是 
惊人 的 , 随 着 代码 的 增多 会 使 JSP 页 面 腔 肿 不 堪 , Web 服务 器 的 负荷 过 重 。 因 此 ,在 
Browser/ Web/DataBase 中 间 层 上 采用 基于 MVC 的 设计 模式 。Model 层 用 来 实现 业务 
逻辑 ,View 层 用 来 显示 用 户 界面 ,Controller 层 用 来 负责 View 层 和 Model 层 之 间 的 控制 
关系 。 具 体 实现 时 ,把 Servlet 用 作 应 用 程序 的 控制 器 ,把 JSP 文档 作为 视图 ,JavaBeans 
被 用 来 表示 模型 。 所 有 的 请 求 都 被 发 送 给 作为 控制 器 的 Servlet, 它 接受 请 求 ,并 根据 请 
求 信 息 将 它们 分 发 给 适当 的 JSP 来 响应 。 同 时 , Servlet 还 根据 JSP 的 需求 生成 
JavaBeans 的 实例 并 输出 给 JSP 环境 。JSP 可 以 通过 直接 调用 方法 或 使 用 UseBean 的 自 
定义 标签 得 到 JavaBeans 中 的 数据 。 这 种 设计 模式 很 好 地 实现 了 数据 层 与 表示 层 的 分 
离 ,使 开发 工作 更 加 容易 和 迅速 。 在 这 种 设计 模式 下 ,各 层次 之 间 的 数据 传递 如 图 8. 3 。 


Controll 
Ontroller | Wodel 


(Servlet) | ER 
DataBase 
(JavaBeans) 


图 8.3 MVC 设计 模式 的 数据 传递 图 


在 数据 的 存 取 方面 ,采用 JSP/Servlet 十 JDBC 的 技术 , 即 客户 端 不 产生 数据 库 查询 命 
令 ,客户 端 上 的 浏览 器 通过 URL 和 中 间 层 的 Web 服务 器 建立 连接 。Web 服务 器 主要 负 
责 接收 本 地 或 远程 浏览 器 的 HTTP 数据 请 求 , 然 后 中 间 层 的 Servlet 收 到 请 求 后 ,通过 执 
行程 序 中 的 SQL 语句 ,利用 JDBC 提供 的 标准 API 对 数据 库 进行 访问 和 相应 的 操作 处 
理 。Servlet 再 将 查询 的 数据 传 给 JSP, 最 后 生成 标准 的 JSP 页 面 将 结果 返回 给 提出 请 求 
的 浏览 器 。 这 样 ,不 仅 将 客户 端 与 数据 库 服务 器 端 分 开 ,同时 提高 了 数据 库 的 访问 效率 。 
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8.2 采用 MVC 结构 的 用 户 登 录 系 统 

本 节 的 内 容 主 要 介绍 使 用 JSP、Servlet 与 JavaBean 编写 具有 MVC 设计 模式 的 用 户 
登录 系统 。 
8.2.1 用 户 登 录 系 统 结 构 

1. 软件 结构 


用 户 登 录 系 统 是 一 个 Java Web 应 用 系统 ,采用 典型 B/S 模式 的 “客户 层 ”“ 应 用 层 ” 
与 “数据 层 ”3 层 软件 结构 。 

客户 层 一 一 提供 基于 客户 端 浏览 器 的 JSP 用 户 页 面 , 即 视图 。 

应 用 层 一 一 提供 运行 在 服务 器 端的 控制 器 与 模型 。 

数据 层 一 一 提供 存放 在 服务 器 端的 存放 和 维护 Web 应 用 中 所 用 到 的 数据 信息 

实现 3 层 软 件 结构 的 符合 MVC 原则 的 用 户 登录 系统 的 程序 框架 如 图 8. 4 所 示 ， 


Sp 视图 控制 器 
用 户 一 loginjsp Checkjava CDB.java 数据库 
success.jsp Userinfo.java 


图 8.4 用 户 登录 系统 程序 框架 


2. 用 户 登录 系统 中 主要 程序 文件 说 明 


(1) 构成 视图 的 应 用 程序 

login. jsp 一 一 用 户 登 录 页 面 。 

success. jsp 一 一 成 功 登录 页 面 。 

(2) 构成 控制 器 的 应 用 程序 

Check. .java 用 于 转换 用 户 输入 数据 .定义 页 面 转 向 的 Servlet。 
和 服务 器 配置 文件 。 


(3) 构成 模型 的 应 用 程序 

CDB. java 用 于 连接 数据 库 的 JavaBean 。 

CD. java 用 于 验证 用 户 信息 的 JavaBean。 

Userinfo. java 用 于 临时 存放 从 数据 库 提取 的 用 户 信息 的 JavaBean。 
(4) 存放 数据 的 数据 库 文件 

这 里 使 用 第 6 章 中 已 经 创建 的 数据 库 文件 questionnaire 及 表 对 象 admins。 


8.2.2 在 MyEclipse 中 配置 Tomcat 服务 器 


在 MyEclipse 中 编写 Web 应 用 系统 的 程序 文件 会 比较 方便 , 它 可 以 编译 Java 文件 ， 
自动 设置 JavaBean、Servlet 程序 文件 的 存放 位 置 ,使 用 Tomcat 运行 JSP 文件 。 
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下 面 介 绍 在 MyEclipse 中 配置 Tomcat 服务 器 的 操作 步骤 。 
(1) 启动 MyEclipse, 打开 MyEclipse 工作 界面 , 单 击 菜单 栏 Window (窗口 ) 一 


Preference… 


由 Resin2 ~ 
Resin 3 

由 -Sun Java System Application Ser 回 Enable 
Sun Java System Application Ser © Disable 
由 Sun Java System Application Ser 
由 Tomcat4 


Tomcat Home Directory CATomcat 6.0 


由 Tomcat 5 Tomcat Base Diredory CaTomcat 6.0 
Tomcat Temp Diredory CaTomcat 6.0\temp 


Optional program Arguments 


图 8.5 Preference (首选 项 ) 对 话 框 


(2) 在 左边 菜单 树 中 选择 MyEclipse 一 Application Servers 悦 Tomcat 6 选项 ,在 右边 
Tomcat Server 框 中 选中 Enable 单 选项 ,然后 单 击 Tomcat Home Directory 文本 框 后 的 
Browse( 浏 览 ) 按 钮 ,选择 Tomcat 的 安装 根 目 录 , 这 里 是 C:\Tomcat 6.0, 其 他 文本 框 会 
自动 填充 。 然 后 单 击 右 下 角 的 Apply( 应 用 ) 按 钮 .如 图 8. 5 所 示 。 

(3) 在 左边 菜单 树 中 选择 MyEclipse>Application Servers 一 Tomcat 6 一 JDK 选项 ,在 
Tomcat JDK Name 框 下 选择 JDK 的 安装 路 径 , 如 图 8.6 所 示 。 然 后 单 击 右 下 角 的 Apply( 应 
用 ) 按 钮 ,如 图 8.6 所 示 。 这 里 要 特别 注意 ,默认 的 是 JRE 的 运行 环境 ,这 里 要 设 定 成 JDK 的 
安装 路 径 , 否 则 ,MyEclipse 无 法 正常 部 属 Web 应 用 ,也 无 法 正常 运行 Tomcat 服务 器 。 


| 由 Resin 2 <^ 
| 由 Resin 3 
| 由 .Sun Java System Application Ser | TomcatJDK name 


| 由 Sun Java System Application Ser DR 人 届 站 

| 申 Tomcat4 

| 由 Tomcat5 

| Tomcat6 

Launch 

| paths 

”外 WebLogic6 
Webtogic7 JDK Virtual Machine must specify a full JDK installation. 
四 WebLogic 8 Specifying a JRE will result in an startup exception. 
‘WebLogic9 


由 "WebSphere 4 Avoid use of the -cp, -dasspath, or -Djavajibrary.path JYM c 


四 Websphere 5 Consult the Classpath page for proper path configuration. 


由 Websphere 6 


ET 
Cw |] 


图 8.6 选择 JDK 
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(4) 在 Preference( 首 选项) 对话 框 单 击 OK( 确 定 ) 按 钮 , 即 可 完成 Tomecat 的 配置 。 

在 MyEclipse 工作 界面 单 击 工具 栏 上 的 "服务 器 ? 曙 ~ 按钮 ,从 下 拉 选 项 中 可 以 看 到 添 
加 进来 的 Tomcat 6 服务 器 按钮 ,如 图 8.7 所 示 。 单 击 Start 开始 按钮 ,将 启动 Tomcat 6 服务 
器 开始 工作 。 


马 = 回 驴 
深圳 @” 
如 " 甸 " 守 全 "中 


图 8.7 Tomcat 6 服务 器 按钮 


8.2.3 设置 WZKF 工程 项 目 
1. 创建 WZKF 工程 项 目 


(1) 在 MyEclipse 工作 界面 ,在 菜单 栏 单 击 File( 文 件 ) 一 New( 新 建 ) 一 Project( 项 目 ) 
菜单 命令 ,打开 “新 建 项 目 (New Project)” 对 话 框 ,从 中 选择 MyEclipse 习 J2EE Projects™ 
Web Project, 如 图 8. 8 所 示 , 然 后 单 击 “ 下 一 步 ” 按 钮 。 


选择 向 导 
Create J2EE Web Project 


向 导 (W) : 
输入 过 小 器 文本 
- MyEdipse 
| SS J2EE projeds 
区 EJB projedt 


闪 Enterprise Application projedt 


web Project 


图 8.8 “新 建 项 目 ” 对 话 框 


(2) 在 Web Project Details 框 的 Projects Name 文本 框 中 输入 WZKF, 如 图 8. 9 所 
示 ,其 他 采用 默认 值 ,注意 这 里 Context root URL 自动 设置 为 /WZKF。 然 后 单 击 “ 完 成 ” 
按钮 即 可 完成 创建 项 目的 工作 。 
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| New J2EE Web Project 
Create web project 


-Web Project Details 


projed Name wzkH 
Location Use default location 


Directory CashaolpxworkspaceNWZKF 


Source folder src 


Web root folder WwebRoot 


Context root URL /WZKF 
J2EE Specification Level 

© J2EE 1.3 @® J2EE 14 [default] 
JSTL Support 


加 Add JSTL libraries to WEB-INF/lib folder? 
@JsTL10 © STL11 


图 8.9 New Project( 新 建 项 目 ) 对 话 框 


2. 设置 虚拟 目录 


(1) 在 MyEclipse 工作 界面 “ 包 资 源 管理 器 "中 选中 WZKF 工程 项 目的 根 目录 , 单 击 
工具 栏 上 的 “部 署 应 用 程序 ”上 想 按 钮 ,打开 Project Deployments 对 话 框 ,确保 Projects 框 


Manage Deployments 
Deploy and undeploy J2EE projects. 


Deployments 


Server 


Remove 


Redeploy 


1 | Brorwse 
Deployment status 


图 8. 10 ”Project Deployments 对 话 框 
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(2) 在 打开 的 New Deployment 新 部 署 对 话 框 中 ,从 Server 下 拉 选 项 中 选择 
Tomcat 6 ,在 Deploy type 选项 中 选择 Exploded Archive, 即 使 用 目录 方式 部 属 , 不 打 成 war 
包 , 如 图 8. 11 所 示 , 最 后 单 击 “ 完 成 ”按钮 返回 上 一 个 界面 Project Deployments 对 话 框 。 


New Deployment 


Create new project deployment for WZKF 


WebProject: WZ2KF 


Server: 


Edit server connectors... 


Deploy type: 图 Exploded Archive (development mode) © packaged Archive (production mode) 


Deploy Location: CATormcat 6.0\webapps\WZKF 


图 8.11 New Deployment( 新 部 署 ) 对 话 框 


(3) 在 Project Deployments 可 以 看 到 部 署 的 虚拟 目录 在 Tomcat 6 服务 器 目录 中 对 
应 的 物理 路 径 , 如 图 8.12 所 示 。 此 时 ,原来 灰 显 的 按钮 变 为 可 用 , 单 击 Remove 和 
Redeploy 按钮 可 以 移 除 部 署 和 重新 部 署 。 单 击 OK 按钮 , 即 可 完成 虚拟 目录 的 定义 。 


Manage Deployments 
Deploy and undeploy J2EE projects. 


Server Type Location 
v 矶 Tomcat 6 Exploded CATomcat 6.0\webapps\WZKF 


1 [Pa 
Deployment Status 
Successfully deployed. 


图 8.12 虚拟 目录 WZKF 在 服务 器 目录 中 对 应 的 物理 目录 


3. 察看 WZKF 工程 项 目 中 的 内 容 


单 击 WZKF 工程 项 目 右边 的 * 折 大 "按钮 因 , 可 以 看 到 ,需要 的 类 都 已 经 自动 加 载 了 进 
Jas6 ， 


来 ,还 有 一 个 J2EE 的 类 环境 变量 ,如 图 8. 13 所 示 ,这 就 是 使 用 MyEclipse 的 方便 之 处 。 


蕊 Java - Edipse SDK 


文件 旧 ”编辑 四 ” 谋 代 码 (8) 重 构 中 ” 议 蜡 (NV) Search 项 目 (PE) ”MyEdipse 运行 窗口 (W 帮助 C 
嘛 > 国信 大 图 个 有-@ 疡 三 功 "-O-7@%- 旱田 团 昌 
芒 才 加 ~- 入 玫 区 名” .图 和 -天 "定名 Or 
OX 3 下 
大 曙 不 可 用 。 
甲 蝇 JDOMLX 


四- Test 

由 鹃 web 

雯 web-yhdl 
白天 EC 


-src 
Bi JRE 系统 库 ljre1.6.0_03] 
由 -三 J2EE 14 Library Container “|| 回 题 


由 -E> WebRoot 


Javadoc| 声 明 量 控制 台 只 


此 时 没有 要 显示 的 控制 台 。 


丰 昌 ~” 0 


图 8.13 WZKF 项 目 包含 的 内 容 


8.2.4 ”创建 用 户 登 录 系统 中 “视图 ”模块 中 的 应 用 程序 


1. 创建 用 户 登 录 的 JSP 页 面 


(1) 在 MyEclipse 工作 界面 上 右 击 WZKF 下 的 WebRoot 子 目 录 , 在 弹出 的 快捷 菜单 中 
选择 New 一 “文件 夹 " 命 令 , 打 开 “ 新 建文 件 夹 ”对 话 框 ,在 “文件 夹 名 "文本 框 输入 yhdl, 如 
图 8. 14 所 示 。 然 后 单 击 “ 完 成 ”按钮 。 即 可 在 WebRoot 子 目 录 下 创建 一 个 子 文件 夹 。 


WZKF/wWebRoot 


全 守 吕 


Bl JDOMLX 
人 Bl Test 
由 - 鲜 web 
由 - 鲜 web-yhdl 


日 - 留 wzKF 
| myedipse 

I- src 
田 - 色 WebRoot 


文件 实名 (VY) : yhdl 


EE 


回 


图 8. 14 “新 建文 件 夹 "对话 框 


已 ae] ms] 
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(2) 在 MyEclipse 工作 界面 右 击 WZKF/ WebRoot/yhdl 子 文件 夹 名 ,在 弹出 的 快捷 


菜单 中 选择 New 一 “其 他 ”命令 ,打开 New (新 建 ) 对 话 框 ,从 中 选择 Web 一 JSP 选项 ,如 
图 8.15 所 示 。 然 后 单 击 “ 下 一 步 ” 按 钮 。 


选择 向 导 


Create a new JavaServer page 


向 导 QW) : 
输入 过 湾 医 文本 


由 -Er Server 

BE web 

| 上 国 css 

区 HIML 
人 Javascript 

“ 扣 国 


图 8.15 “新 建 ”" 对 话 框 
(3) 在 “新 建 ” 对 话 框 的 “文件 名 ”文本 框 中 输入 login. jsp, 如 图 8. 16 所 示 。 


i 
| JavaServer Page 


| create a new JavaServer page. 


输入 或 选择 父 文件 实 (E) : 
WZKF/WebRoot/yhdl 
中 | 全 守 吕 
| BJDOMLX 
申 Bl Test 
由 鲍 web 
申 全 web-yhdl 
日 外 WZKF 
- .myedlipse 
全 src 
BE WebRoot 
它 META-INF 
四 -E> WEB-INF 
它 yhdl 


详 件 名 MW) : |loginjsp 


EE 


回 


Eee 


8.16 输入 文件 名 


ja38 = 


(4) 在 “新 建 ” 对 话 框 单 击 “ 完 成 ”按钮 ,将 打开 login. jsp 编辑 文件 视图 窗口 ,如 
图 8.17 所 示 。 


A 一 一 
文件 吕 “ 编 辑 (E)， 庆 代 码 (S) 重 构 DD” Refactor Source 训 谢 (IN)， Search 项目 B MyEdipse 运行 R) 和 窗口 IV) 帮助 (H) 
中 ~ 国 全 厌食 可 有 "@ 记 6 芝 -DOD-9- 时 田 团 昌 
省 者 7” 四 FE 加” .图 @ 妇 - 有 "如 
国 Ioginjsp 3 呈 口 || 茎 大 曙 了 
<#8 page language="java" per 五 区 
= pageEncoding="IS0-8859-1"* ey 
是 Ey Test <!DOCTYPE html PUBLIC "-//W3C//DTD HTI 1 eh Jspsdirective-pag| 
申 跑 web <html> -这 pocTYpEhtml 
日 器 web-yhdl Schead> 四 -如 html 
日 臣 wzKF <mera http-equiv="Content-Type" conte: 
| 上 src <title>Insert cicle here</title> 
由 -可 JRE 系统 库 ljre1.6.0_03] bead> 
上 局 <body> 


-BN J2EE 14 Library Container|s 并 


日 色 WebRoot 4 
由 -对 META-INF Source | Design| Design/Source|IE preview |” | 上 


中 多 同 题 [Javadoc| 声 明 [ 园 控制 台 如 夺回 -中 "= 品 


se 贺 二 
| 此 时 没有 要 显示 的 控制 | 
[Wloginjsp LD 


本 yhdl - WZKF/WebRoot 


图 8.17 编辑 文件 视图 窗口 
在 其 中 输入 如 下 所 示 的 用 户 登 录 login. jsp 文件 的 源 代码 : 


<$% page language= "java"pageEncoding= "GB2312"%> 
<html> 
<head><title> 用 户 登录 页 面 < /title>< /head> 
<body> 
<div align= "center"> 
< 
if(!((String)request .getAttribute ("error.message")==null1)){ 


名 > 
< form name= "regForm" method= "post" action="./Check"> 
<$Jelse{%s> 
< form name= "regForm" method= "post" action="../Check"> 
<%}%> 


用 户 名 < input name= "username" type= "text" id= "username"><br/> 

密 &nbsp; 码 < input name= "password" type= "password" id= "password"> <br/> 
< input type= "Submit" name= "submit" value= "提交 "/> 

< input ti = "Reset" name= "reset" value= " 重 置 "/> 

<br/><br/> 


<font color= "red"> 
< 


if(!((String)request .getAttribute ("error.message")==nul11)){ 
out .print (request .getAttribute ("error.message")); 
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> 
</font> 
</form> 
</div> 
< /body> 
</htm> 


注意 :“. /Check” 表 示 为 当前 目录 ,“../Check” 表 示 为 当前 路 径 的 父 目 录 。 


(5) 编辑 文件 视图 窗口 下 方 单 击 Design 标签 ,会 出 现 JSP 文件 的 设计 视图 ,是 一 个 
可 视界 面 ,如 图 8. 18 所 示 , 在 这 里 可 以 方便 地 对 JSP 页 面 进行 设置 。 


Source [DesiodsDesign/Source IE Preview| Mozilla Preview 


图 8.18 JSP 设计 视图 窗口 


2. 创建 用 户 登 录 成 功 的 JSP 页 面 
在 JSP 编辑 视图 窗口 ,输入 如 下 所 示 的 success. jsp 源 代码 : 


<%@page language= "java" pageEncoding= "GB2312"%> 
<html> 


<head> 
<title> 用 户 登 录 成 功 页 面 < /title> 
< /head> 
<body> 
<div align= "center"> 
祝贺 你 <%= (String) request .getAttribute ("name")%> 登 录 成 功 ! 
</div> 
< /body> 
</html> 


单 击 菜单 栏 “ 文 件 ” 一 “另存 为 ”菜单 命令 ,可 保存 生成 success. jsp 文件 。 
Mm240 。 


8.2.5 创建 用 户 登 录 系 统 中 “控制 器 ”模块 中 的 应 用 程序 


Servlet 应 用 程序 是 由 负责 对 一 个 HTTP 请 求 产 生 适 当 响 应 的 Java 类 构成 的 ,如 同 
创建 JavaBean 一 样 ,创建 Servlet 从 编写 Java 源 程序 开始 ,其 存放 位 置 与 JavaBean 相同 。 
在 MyEclipse 中 在 WZKF 项 目 中 自动 为 存放 Java 源 程序 提供 了 一 个 名 为 src 的 子 目 录 ， 
可 以 在 其 中 定义 不 同 的 包 ,存放 不 同 应 用 使 用 的 用 于 创建 JavaBean 与 Servlet 的 Java 源 
程序 ,运行 这 些 Java 源 程序 后 , MyEclipse 会 自动 将 其 class 文件 存放 在 WebRoot\WEB- 
INF\classes\ 包 名 中 ,这 也 是 使 用 MyEclipse 的 方便 之 处 。 


1. 创建 Servlet 控制 器 程序 Check. java 


(1) 右 击 WZKF 工程 项 目 src 子 目录 ,在 弹出 的 快捷 菜单 中 选择 New 一 class( 类 ) 命 
令 , 打 开 New Java( 新 建 Java 类 ) 对 话 框 ,如 图 8.17 所 示 。 

(2) 在 “ 包 ” 文 本 框 输入 mypack, 在 "名称" 文本 框 输入 Check, 如 图 8. 19 所 示 。 最 后 单 
击 “ 完 成 ”按钮 。 将 在 WZKF/src 子 目录 下 创建 一 个 mypack 子 文件 夹 ,并 在 其 中 创建 一 个 自 
动 生成 的 Check. java 文件 ,同时 打开 Check. java 文件 编辑 视图 窗口 ,如 图 8. 20 所 示 。 


| 半 和 时 Java 类 各 
Java 类 
创建 新 的 Java 类 。 四 


源 文件 实 (D) : WZKF/src 


包 ( : mypack 


| asm : 


名 称 (M) : Check 

图 公 用 四 回 缺 首 (LU 站 私有 (0 站 委 保 护 O 
回 抽象 回 终 志 仙 “ 口 静 志 (O 

javajang.Dbjedt 


想 要 创建 哪些 方法 存根 ? 
回 public static void maintstring[] args) 
回来 自 超 类 的 构造 画 数 (O) 
贺 继承 的 抽象 方法 (H) 
咱 殖 要 急 在 当前 项 目的 屋 性 中 配置 的 那样 来 添加 注释 吗 ? 


加 


图 8.19 定义 构成 Servlet 的 Java 程序 名 


(3) 在 Check. java 文件 编辑 视图 窗口 输入 如 下 所 示 的 Check. java 源 程序 : 


Package mypack; 


import java-io- 关 了 


。 241g 


图 留 大 久 本 上- 忆 加 苏 "-O-%- 四 四围 日 
Gr” FE 如” J O@ 雪 - 玉 "HO 

国 checkjava 器 

罩 package mypack; 


public class Check { 


1 web } 
里 web-yhdl 
日 四 wzkF 
src 
| 扎 - 山 mypack 


由 va 
由 - 副 JRE 系统 库 [jre1.6.0_03] 
外 -BN J2EE 14 Library Container 
-EE WebRoot 
由 - 马 META-INF 4 


和 同 题 | Javadoc| 声明 | 加 控制 台 于 CE a) 


S® yhd 此 时 没有 要 显示 的 控制 台 。 


|- 国 loginjsp 
-- 国 successjsp 


i mypack.Checkjava - WZKF/src 
图 8. 20 编辑 Java 程序 视图 窗口 


import java.sql .Connection7 

import javax.servlet.x*; 

import javax.servlet.http.HttpServlet; 

import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 


public class Check extends HttpServlet { 
Private CDB cdb=null; 


String page=null; 

public Check() {super ();} 

public void init() {cdb=new CDB ();} 

public void destroy() {super.destroy();} 

public void doGet (HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 


public void doPost (HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 


try{ 
String yhm= (String) request .getParameter ("username"); 


Mma 2 *» 


String m= (String) request .getParameter ("password"); 


Connection con= cdb.getCon(); 


boolean temp= CD.isValid(con, yhm, mm); 
cdb.closeCon (con); 


IE (!temp) { 


request .setAttribute ("error.message", "非法 登录 !"); 
page= "yhdl/login.jsp"; 

} else{ 

request .setAttribute ("name", yhm); 

page= "yhdl/success.jsp"; 


request .getRequestDispatcher (page) .forward (request, response); 
}catch (Exception e){ 
e.printstackTrace () 7 
} 
return; 
} 
} 


由 于 还 没有 编写 JavaBean 的 应 用 程序 ,这 时 ,Check. java 程序 会 显示 一 些 错误 。 要 
避免 这 种 问题 ,可 等 创建 “模型 "模块 中 的 JavaBean 后 再 运行 该 程序 。 

运行 Check. java 程序 时 , 单 击 工具 栏 上 的 "运行 ?按钮 加 ,在 其 快捷 下 拉 菜 单 中 选择 
“运行 方式 ”>Java Bean。 


2. Servlet 的 知识 点 归纳 


(1) 创建 Servlet 需要 导入 的 类 库 

创建 Servlet 的 Java 类 时 必须 导入 java. io. * 、javax. servlet. * 和 javax. servlet. 
http. * 类 库 。 

(2) Servlet 是 一 个 Java 类 

Servlet 是 一 个 Java 类 ,但 与 一 般 的 Java 类 不 同 的 是 它 不 需要 main() 方 法 ,这 点 与 
JavaBean 相同 。 可 以 将 它 看 成 为 运行 在 服务 器 上 的 applet 小 程序 。 

(3) Servlet 是 继承 自 HttpServlet 类 

因为 Servlet 是 继承 自 HttpServlet 的 子 类 ,必须 覆盖 doGet()、doPost()、doPut()、 
doDelete() 等 方法 之 一 。 通 常 覆 盖 doGet() 方 法 ,这 是 HTTP 默认 的 请 求 方法 。 这 些 方 
法 用 来 处 理 用 户 的 请 求 与 对 用 户 的 响应 ,在 方法 内 ,用 户 请 求 表示 为 一 个 
HttpServletRequest 对 象 , 例 如 request; 对 用 户 的 响应 表示 为 一 个 HttpServletResponse 
对 象 ,例如 response。 

init() 方 法 是 初始 化 方法 ,例如 ,在 初始 化 方法 中 创建 打开 数据 库 的 连接 对 象 。 
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destroy() 方 法 用 来 销毁 Servlet 。 
3. 修改 web. xml 文件 


展开 WebRoot 目录 下 的 WEB-INF 子 目录 ,双击 其 中 的 web. xml 文件 ,在 文件 编辑 
视图 窗口 打开 该 文件 ,输入 如 下 所 示 代 码 ,修改 web. xml 文件 并 保存 。 


<?xml version="1.0" encoding= "UTF- 8"?> 

<web- app version= "2.4" xmlns= "http://java.sun.com/xml/ns/j2ee™" 
xmlns:xsi= "http://www.w3.org/2001/XMLSchema- instance™ 
xsi:schemaLocation= "http://java.sun.com/xml/ns/j2ee 
http://java.sun.com/xml/ns/j2ee/web- app 2 4.xsd"> 

<servlet> 

<servlet- name> Check< /servlet- name> 
< servlet- class>mypack.Check< /servlet- class> 


< /servlet> 


<servlet- mapping> 
<servlet- name> Check< /servlet- name> 
<url-pattern> /Check< /url- pattern> 
< /servlet-mapping> 


< /web- app> 


4. web. xml 文件 中 主要 元 素 含义 


1) servlet 元 素 

servlet 元 素 用 来 给 Web 应 用 中 使 用 的 servlet 或 JSP 程序 注册 名 称 , servlet-name 
子 元 素 用 来 定义 servlet 或 JSP 程序 的 名 称 ;servlet-class 子 元 素 用 来 定义 servlet 类 文件 
所 在 的 位 置 。 

在 web. xml 中 的 servlet 元 素 表 示 位 于 WEB-INF/classes/mypack/Check 的 servlet 
注册 名 为 Check, 注 册 名 可 以 与 原来 的 servlet 类 名 不 同 。 

servlet 的 注册 名 可 在 URL 中 使 用 ,利于 提高 安全 性 。 

2) servlet-mapping 元 素 的 作用 

servlet-mapping 元 素 可 以 定制 默认 的 URL。servlet-name 子 元 素 用 来 定义 servlet 
的 名 称 ;url-pattern 子 元 素 用 来 定义 相对 于 一 个 Web 服务 根 目 录 的 URL ,url-pattern 元 
素 的 值 必须 以 斜 杠 (/) 起 始 。 

在 web. xml 中 的 servlet-mapping 元 素 表示 默认 的 URL 地 址 


http://localhost:8080/WZKF/WEB- INF/classes/mypack/Check 


可 使 用 http://localhost:8080/WZKF/Check 代替 ,通过 注册 名 与 此 URL 可 以 找到 


servlet 。 
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8.2.6 创建 用 户 登 录 系 统 中 “模型 "模块 中 的 应 用 程序 
1. 创建 JavaBean 程序 CDB. java 


在 “WZKF/src/mypack” 中 创建 用 于 连接 数据 源 jsp 的 CDB. java, 其 源 代 码 如 下 
所 示 : 


Package mypack; 
import java.sql.*; 
public class CDB { 
Private Connection con=null; 
public CDB() { } 
public Connection getCon() { 
try { 
Class. forName ("sun.jdbc .odbc .JdbcodbcDriver"™"); 
con= DriverManager .getConnection("jdbc:odbc:jsp"); 
} catch (Exception e) { System.err.println(" 数 据 库 连接 :"+e.getMessage ()); } 
return con; 
} 
Public void closeCon (Connection con) { 
try{if (con!=null)con.close();}catch (SQLException ex) { 
System.err.println ("释放 对 象 :"+ ex.getMessage ()); 


: 


运行 CDB. java 程序 , 单 击 工具 栏 上 的 “运行 ?按钮 加 ,在 其 快捷 下 拉 菜 单 中 选择 “ 运 
行 方式 ”~Java Bean。 


2. 创建 JavaBean 程序 CD. java 


在 WZKF/src/mypack 中 创建 用 于 判断 数据 的 CD. java, 其 源 代 码 如 下 所 示 : 


Package mypack; 
import java.sql.*; 
Public class CD { 
Public CD() { } 
public static boolean isValid(Connection convString yhm,string mm) { 
boolean temp= false; 
Preparedstatement ps=null; 
ResultSet rs=null; 
String sql= "select admname from admins where admname= ?and admpwd= ? "; 
try { 
// 查 询 记 录 
Ps= con .PrepareStatement (sql); 
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ps.setstring (1,yhm); 

Ps -setString (2,mm); 

rs= ps.executeQuery () > 

if (rs.next ())temp=true; 

else temp= false; 

rs.close(); 

ps.close(); 

} catch (Exception e) {e.printSstackTrace();} 
return temp; 


运行 CD. java 程序 。 
gd 


8.2.7 运行 用 户 登录 系统 


1. 输入 网 址 打开 login. jsp 登录 页 面 


单 击 MyEclipse 工具 栏 上 的 MyEclipse Web Browser 按钮 态 , 在 地 址 栏 输入 


http://localhost:8080/WZKF/yhdl/login. jsp, 单 击 按钮 医 或 按 Enter 键 , 可 看 到 如 
图 8. 21 所 示 页 面 。 


昌 )ava - MyEclipse Web Browser — Eclipse SDK_ 是 
文件 中 ” 编 强 四” 天 代 码 (G) ， 重 构 (D， 训 响 () Search ”项目 (PD) ”MyEdipse 运行 窗口 QW 帮助 (H) 
呈 * 贺 昌 大 和 个 四-@ 世 吧 基 "-D- 本 旱田 图 四 

BFB 名” 3B 


@ MyEdipse Web Browser 3 Sap 
httpyylocalhostsosorwzkFyhdyiognjsp ~ 记 | 闪 > 中 守 国史 | 图 


用 户 名 
密 码 
Ed 9 


由 - 副 JRE 系统 库 jrel.t “|[ 间 题 | Javadoc| 声明 | 园 控制 台 3 二 口 


外- J2EE 14 Library， | < 已 终止 > CDB [Java Bean] CAprogram Files 国 其 滨 | 杞 角 | 村 昌 -5 
-EE WebRoot 


图 8.21 用 户 登录 页 面 


输入 用 户 名 lpshao, 密 码 X X , 单 击 “提交 ”按钮 ,如 果 密 码 正 确 , 可 看 到 如 图 8. 22 所 
示 页 面 。 如 果 密 码 或 用 户 名 不 正确 ,可 看 到 如 图 8. 23 所 示 页 面 。 


2. 知识 点 归纳 


在 基于 Java 的 Web 应 用 系统 中 是 通过 JSP、Servlet 与 JavaBean 来 实现 MVC 设计 
模式 的 。 其 中 ,视图 就 是 客户 端 浏览 器 中 看 到 的 jsp 页 面 ,它们 是 负责 与 用 户 交 互 的 前 台 
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@ MyEdipse Web Bro-. 3 、 团 cDBjava | 国 cojava | 光 Ee) 
http://localhost:8080/WZKF/Check -BP | 对 了 中 吕 国 全 | 国 


祝贺 你 1pshao 登 录 成 功 ! 


图 8. 22 用户 成 功 登录 页 面 


https//localhost:8080/ WZKF/Check -PlX- 叶 中 国信 | 图 


用 户 名 
密码 


非法 登陆 ! 


图 8.23 ”用户 登录 失败 页 面 


页 面 , 用 来 接收 用 户 输 入 数据 ,或 向 用 户 返 回 数据 处 理 结果 。 控 制 器 用 来 解决 控制 页 面 流 
程 , 转 发 ,提交 , 重 定向 、 验 证 处 理 数 据 等 任务 , 它 将 用 户 输入 的 数据 进行 转换 交 给 模型 处 
理 ,然后 根据 模型 得 到 的 业务 处 理 结果 决定 使 用 哪个 视图 (JSP 页 面 ) 展 现 结果 ,控制 器 应 
用 程序 主要 由 Servlet 构成 。 模 型 用 来 完成 业务 逻辑 ,负责 访问 数据 .处 理 数据 或 临时 存 
储 数据 等 工作 ,模型 应 用 程序 主要 由 JavaBean 构成 。 


8.3 Ajax 开发 模式 


8.3.1 什么 是 Ajax 开发 模式 
1. 什么 是 Ajax 


Ajax 是 Asynchronous JavaScript and XML 的 缩写 ,意思 是 异步 的 JavaScript 与 
XML。 它 可 以 实现 客户 端的 异步 请 求 操作 ,这 样 可 以 实现 在 不 需要 刷新 页 面 的 情况 下 与 
服务 器 进行 通信 ,从 而 减少 了 用 户 的 等 待 时 间 。 

2. Ajax 的 异步 概念 

传统 Web 开发 模式 是 一 种 同步 概念 。 用 户 必 须 等 待 每 个 请 求 , 当 一 个 请 求 完 成 后 才 
能 获得 结果 ,在 使 用 完 这 些 结果 后 才 会 发 出 新 的 请 求 。 例 如 . 当 用 户 请 求 了 一 篇 文章 ,他 
肯定 会 在 阅读 完 这 篇 文章 后 才 会 去 获取 其 他 数据 ,否则 当前 文章 页 面 将 被 刷新 ,无 法 阅 
读 。 它 属于 “请 求 一 刷新 一 响应 ”模式 ,用户 只 有 等 请 求 完 成 后 才能 进行 用 户 操作 ,操作 完 
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成 后 才能 提交 下 一 个 请 求 , 用 户 行为 和 服务 器 行为 是 一 种 同步 的 关系 。 

Ajax 开发 模式 是 一 种 异步 概念 。 这 意味 着 客户 端 和 服务 器 端 不 必 再 相互 等 待 , 而 是 
进行 一 种 并 发 的 操作 。 用 户 再 发 送 请 求 以 后 可 以 继续 当前 工作 ,包括 浏览 或 提交 信息 ,在 
服务 器 响应 完成 之 后 ,Ajax 引擎 会 将 更 新 的 数据 显示 给 用 户 看 ,而 用 户 则 根据 响应 内 容 
来 决定 自己 下 一 步 的 行为 。 


3. Ajax 的 优点 


与 传统 的 Web 应 用 不 同 ,Ajax 在 用 户 与 服务 器 之 间 引 入 了 一 个 Ajax 引擎 ,消除 了 
网 络 交互 过 程 中 的 处 理 一 等 待 一 处 理 的 缺点 。Ajax 的 优点 具体 表现 在 以 下 几 方面 : 

(1) 减轻 服务 器 的 负担 。Ajax 的 原则 是 “ 按 需 求 获取 数据 ?. 这 可 以 最 大 程度 地 减少 
元 余 请 求 和 响应 对 服务 器 造成 的 负担 。 

(2) 可 以 把 一 部 分 以 前 由 服务 器 负担 的 工作 转移 到 客户 端 , 利 用 客户 端 闲置 的 资源 
进行 处 理 , 减 轻 服务 器 和 带宽 的 负担 ,节约 空间 和 成 本 。 

(3) 无 需 刷 新 更 新 页 面 ,从 而 使 用 户 不 用 像 以 前 一 样 , 在 服务 器 处 理 数据 时 只 能 在 死 
板 的 白 屏 签 焦急 地 等 待 。Ajax 使 用 XMLHttpRequest 对 象 发 送 请 求 并 得 到 服务 器 响 
应 ,在 不 需要 重新 载 和 人 整个 页 面 的 情况 下 ,可 以 通过 DOM 及 时 将 更 新 的 内 容 显示 在 页 
面 上 点 。 

(4) 可 以 调用 XML 等 外 部 数据 ,进一步 促进 页 面 显 示 和 数据 的 分 离 。 

(5) 是 基于 标准 化 的 并 被 广泛 支持 的 技术 ,不 需要 下 载 插件 或 小 程序 。 


4. Ajax 的 缺点 


(1) Ajax 通信 常常 是 一 个 数据 片段 ,例如 ,xml. html 片段 ,或 者 纯 文本 ,这 些 信 息 不 
是 完整 的 html 文档 ,而 且 通 过 后 台 来 异步 获取 ,不 能 被 搜索 引擎 发 现 并 缓存 。 

(2) Ajax 将 大 量 的 运算 从 服务 器 端 转 移 到 了 客户 端 ,意味 着 浏览 器 将 承受 更 大 的 负 
担 , 不 再 是 简单 的 文档 显示 。Ajax 中 的 核心 语言 是 JavaScript, 作 为 一 门 解释 型 的 脚本 语 
言 ,其 运行 效率 不 是 很 高 。 而 且 依赖 不 同 的 浏览 器 实现 。 


8.3.2 Ajax 应 用 实例 一 一 用 户 注 册页 面 
1. 新 用 户 注册 页 面 文件 


新 用 户 注册 页 面 如 图 8. 24 所 示 。 该 页 面 的 特点 是 可 以 在 输入 用 户 名 后 立即 检测 数 
据 库 中 是 否 存在 该 名 称 ,可 以 根据 选择 的 不 同 省 名 显示 该 省 的 市 名 。 还 可 以 立即 判断 是 
否 填写 了 必 填 写 的 数据 。 

新 用 户 注册 页 面 文件 为 index. jsp, 源 代码 如 下 : 


<$%@page contentType= "text/html; charset= gb2312" language= "java" import="Jjava.sql. 关 " 
errorPage="" $> 

<html> 

<headq> 
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/ 新 用 户 注册 页 面 - Windows Internet Explorer 
登 写 ~ | 站 http://1ocalhost-8080/ERFSS/shu/index. (|| || x | | :sis PP 
文件 人 E) 编辑 时 ) 查看 QV ” 收 阅 夹 G) 工具 XI) ”帮助 0D 链接 
宽 安居 新 用 PP 注册 页 面 | 合 - 日 - 部- 导 中 - 络 IRO-” 
新 用 户 注册 页 面 
用 户 名 : [检测 用 户 名 ] * 
密码 : 本 
确认 密码 : 


国 
生日 : ] (格式 ，1980-07-17) 
性 别 。 ”加 男生 QO 女生 
省 。 也 京 园 市 。 

oICQ 号 码 : [i 

个 人 主页 : 
地 址 。 

邮政 编码 : 


Email: 


图 8.24 新 用 户 注册 页 面 


<title> 新 用 户 注 册页 面 < /title> 
<meta http- equiv= "Content- Type" content= "text/html; charset= gb2312"> 
< Script src="function.js" language= "javascript"> 
</script> 
<style type= "text/css"> 
.STYLE4 {font- size: 14px; font- weight: bold;} 
</style> 
< /head> 
<%@include file="jdbc-access.jsp"%> 
<% 
String sql="select ID, 省 from 省 "; 
ResultSet rs=s.executeQuery (sql); 
> 
新 用 户 注册 页 面 
< form name= "forml" method= "post" action=""> 
<table width="76% " height= "295" border="0" cellpadding= "0" cellspacing= "0"> 
<tr><td width= "27% " align= "center">< span class="STYLE4"> 用 户 名 : </span>< /td> 
< td colspan="4"> < input name="username" type="text" class="table" id= 
"username"> 
<a href= 叶 "onClick="checkName()"> [检测 用 户 名 ]< /a> snbsp; * < /td> 
</tr> 
<tr><td align= "center">< span class= "STYLE4"> 密码 : < /span>< /td> 
<td colspan= "4" class= "word"> < Input name= "PWD1" type= "password" class= "table" 
iqd= "PWD1"> 


关 <V/td> 


。 2 有 gf 人 


</tr> 


<tr><td align= "center"> < span class= "STYLE4"> 确 认 密 码 : < /span> < /td> 


<td colspan= "4" class= "word"> < input name= "PWD2" type= "password" class= "table" 
id= "PWD2"> 
x* </td> 
</tr> 
<tr><td align= "center">< span class= "STYLE4"> 生 日 : < /span>< /td> 


< td colspan="4" class="word"> < input name="birthday" type=" text" class= 
"table" id= "birthday"> 
(格式 : 1980- 07- 17)< /td> 
< 
<tr><td align= "center">< span class="STYLE4"> 性 别 : < /span>< /td> 
<td colspan= "4"> < input name= "sex" type= "radio" value=" 男 " checked> 男生 
< input type= "radio" name= "sex" value=" 女 "> 女生 < /tqd> 
</tr> 
<tr><td align= "center" class= "STYLE4"> 省 : < /td> 


<td width= "27% "> < select name= "supertype" id: 
"f1(this.value)"> 


"supertype" onChange= 


< 多 

while (rs.next() ) 

{ 
> 
<option value="<%=rs.getInt (1)%>"><%=rs.getstring(2)% >< /option> 
<%}%> 
</select>< /td> 

<td width= "22% " align= "center">< span class= "STYLE4"> 市 : < /span> < /td> 

<td width= "24% " id= "gubType"> gnbsp;< /td> 
< /tr> 


<tr><td align= "center"> < span class= "STYLE4"> OICQ 号 码 : < /span> < /td> 

<td colspan= "4"> < input name= "OICQ" type= "text" class= "table" id= "OICQ">< /td> 
< /tr> 
<tr><td align= "center"> < span class= "STYLE4"> 个 人 主页 : < /span> < /td> 

<td colspan= "4"> < Input name= "homepage" type= "text" class="table" id= "homepage" 

size="50">< /td> 
</tr> 
<tr><td align= "center">< span class= "STYLE4"> 地 址 : < /span> < /td> 

<td colspan= "4"> < input name= "address" type= "text" class= "table" id= "address" size= 
"50">< /ta> 
</tr> 


<tr><td align= "center"><span class="STYLE4"> 邮 政 编码 : < /span> < /td> 


<td colspan= 
</td> 


">< input name= "postcode" type= "text" class= "table" id= "postcode"> 


</tr> 


<tr><td align= "center">< span class= "STYLE4"> Email: </span>< /td> 


Nano 。 


<td colspan="4" class= "word"> < input name= "Email" type= "text" class= "table" id=" 
Email" size="46"> 
关 < /td> 
< /tr> 


<tr><td colspan= "5" align= "center"> 


< input name= "save" type= "button" class= "btn_grey" onClick= "mycheck() "value= "保存 " 


&nbsp7 
< input name= "re" type= "reset" class= "btn_grey" value= " 重 置 "> < /td> 
< /tr> 
< /table> 
< /form> 
< /body> 
</html> 


2. 数据 库 连接 文件 


为 了 保持 用 户 信息 ,可 先 在 数据 库 中 建立 一 个 表 , 在 新 用 户 注 册页 面 文件 index. jsp 
中 使 用 的 数据 库 连 接 文件 jdbc-access. jsp, 源 代码 如 下 : 


<$% page import= "java.sql.* "和 > 

<%Class.forName ("sun.jdbc.odqbc.JdbcodqbcDriver") > 

String url= "jdbc:odbc: driver= {Microsoft Access Driver (* .mdb)};DBQ= D:/ERPSS/shu/DBR. 
mdb"; 

Connection c= DriverManager.getConnection (url,"",""); 

Statement 

Ss=C.createSstatement (ResultSet .TYPE SCROLL SENSITIVE,ResultSet .CONCUR UPDATABLE ); 

> 


可 见 , 数 据 库 文件 DBA. mdb 存放 在 D:/ERPSS/shu 文件 夹 下 。 
3. 用 户 名 检测 文件 


在 新 用 户 注 册页 面 文件 index. jsp 中 要 根据 新 用 户 输 入 的 用 户 名 检测 数据 库 中 是 否 
存在 ,需要 调用 函数 checkName() ,而 该 函数 需要 使 用 checkName. jsp 文件 与 数据 库 进 
行 连 接 与 判别 。checkName. jsp 源 代 码 如 下 : 


<$%@page contentType= "text/html; charset= gb2312" language= "java" import="java.sql.*" 
errorPage="" %> 
<%Q@include file="jdbc- access.jsp"%> 
和 
request .setCharacterEncoding ("GB2312"); 
String username= request .getParameter ("username"); 
ResultSet rs=s.executeQuery ("select * from 客户 where 用 户 名 = '"+username+ "" my 
if (rs.next()){ 
out.printin(" 很 抱 菊 ! 用 户 名 ["+ username+ "] 已 经 被 注册 !"); 
}elset 
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out.println (" 祝 贺 您 ! 用 户 名 ["+username+ "] 没 有 被 注册 !1"); 


4. 根据 选择 的 省 名 产生 不 同市 名 的 动态 级 联 菜单 文件 


在 新 用 户 注 册页 面 文件 index. jsp 中 要 动态 产生 级 联 菜 单 ,其 省 名 与 市 名 可 以 由 数据 
库 中 的 数据 产生 需要 使 用 函数 人 1(this. value) ,而 该 函数 需要 使 用 select. jsp 文件 连接 数 
据 库 ,根据 指定 的 省 确定 有 哪些 市 ,显示 结果 如 图 8. 25 所 示 。 


一 新 用 户 注册 页 面 - Windows Internet Explorer 
[ee ~ | 四 ] http://1ocalhest:8080/ERFSS/shau/index. . 国 || 夺 外 六 | |baids 
文件 到 ) ”编辑 下) 查看 GO) 收 若 严 ) 工具 I) 帮助 0D 
突 安居 新 用 户 注 册页 面 国 人- 田 - 各 -四 7 西口- 舍 IRO-“ 


新 用 户 注册 页 面 


用 户 名 ， 区 [ 恰 测 用 户 名 ] * 
密码 : |#* 
确认 密码 : 林 
生日 : (格式 ，1980-07-17》) 
性 别 : © 男生 @ 女生 
省 : 北京 于 市 : 朝 玫 区 国 
oICQ 号 码 : = 
个 人 主页 : 海淀 区 
地 址 ， | 
邮政 编码 : 


Enail: 


图 8.25 动态 产生 的 级 联 菜单 
select. jsp 文件 源 代码 如 下 : 


<%@page contentType= "text/html; charset= gb2312" language= "java" import="java.sql.*" 
errorPage="" $> 

<%@include file="jdbc-access.jsp"%> 

<select name= "typeID" id= "typeID"> 

< 

if((request .getParameter ("ID")==null) || (request .getParameter ("ID")=="")) 

{ 

名 > 

<option value= "0"> 无 选择 < /option> 

| 


else 


int ID= Integer-ParseInt (request .getParameter ("ID")); 
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ResultSet rs=s.executeQuery ("selectx from 市 where 省 ="+ID); 
while (rs-next()) 
{ 
$$> 
<option value="<%=rs.getIint (1)%>"><%=rs.getstring (2)%>< /option> 
<S} 
}$> 


</select> 


5. 保持 多 个 函数 的 JS 文件 


新 用 户 注册 页 面 文件 index. jsp 中 要 使 用 多 个 函数 ,可 创建 一 个 JS 文件 来 保存 它们 ， 
还 可 以 在 其 他 地 方 使 用 这 些 函 数 ,函数 文件 function. js 的 源 代码 如 下 : 


function checkName () { 


Var username= forml .username .value; 
if(username=="") { 
window.alert ("请 填写 用 户 名 !"); 
forml .username .focus (); 
return false; 
} 
elae { 
url= "checkName .jsp? username= "+ Username; 


send request (url); 


} 
function mycheck () { // 判 别 是 否 为 空 或 输入 不 一 致 
if(forml.username.value==""){ 
alert ("请 输入 用 户 名 !") ;forml .username.focus () ;returny } 
if (forml .PWD] .value= 》 
alert ("请 输入 密码 !") ;forml.PWD1.focus () ;returnz] 
IE (forml .PWD2.value==""){ 
alert ("请 确认 密码 !1") ;forml .PWD2.focus () ;return;} 
if (forml .PWD] .value!= forml .PWD2.value){ 
alert ("您 两 次 输入 的 密码 不 一 致 , 请 重新 输入 !"); 
fomml .PWD1 .value= ""; fomml .PWD2 .value="";forml .PWD]1 .focus () ;return;} 
if(forml .Email.value==""){ 
alert ("请 输入 Email 地 址 !") ;forml .Email.focus();return; } 
forml .submit (); 
} 
function £1 (ID){ 
send request2 ("select.jsp?ID= "+ID)7 // 实 现 级 联 下 拉 列 表 
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// 用 户 名 检测 函数 
var http request= false; 


function send request (url){ 


} 


// 初 始 化 、 指 定 处 理 函数 、 发 送 请 求 的 函数 
http request=false; 
// 开 始 初始 化 XMLHttpRequest 对 象 
if (window.XMLHttpRequest){ 
//Mozilla 浏览 器 
http request=new XMLHttpRequest (); 
if(http request.overrideMimeType){ 
// 设 置 MiME 类 别 
http request .overrideMimeType ("text/xml"); 
} 
} else if (window.ActiveXObject){ 
// 焉 浏览 器 


try{ 
http_request=new ActiveXObject ("Msxm]l2 .XMLHTTP"); 


}catch (e){ 


try{ 
http_ request=new ActiveXxObject ("Microsoft .XMLHTTP"); 


}catch (e) {} 


} 

if(!http request){ 
// 异 常 ,创建 对 象 实例 失 败 
window.alert ("不 能 创建 xMLHttpRequest 对 象 实例 "); 
return false; 


} 
http_ request .onreadystatechange=processRequest; 
// 确 定 发 送 请 求 的 方式 和 url 以 及 是 否 同步 执行 下 段 代码 


http_request .open ("GET",url,true); 


http request.send (null); 


// 处 理 返回 信息 的 函数 


function processRequest (){ 
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if(http request.readystate==4){ 
// 判 断 对 象 状 态 
// 信 息 已 经 成 功 返 回 ,开始 处 理 信息 
if(http request.status==200){ 
alert (http request.responseText); 


J}else{ 


alert (' 请 求 的 界面 异常 1'); 
alert (http request.responseText); 


} 


// 级 联 下 拉 列 表 %*%%%% 关 美美 关 关 关 闫 闫 关 关 美美 关 美美 关 关 关 闫 闫 关 闫 闫 关 尖 美 闫 关 关 闫 甘美 关 闫 闫 尖 关 闫 闫 关 闫 闫 关 关 关 关 关 关 闫 关 关 关 关 闫 关 关 


function send request2 (url){ 
// 初 始 化 指定 处 理 函 数 、 发 送 请 求 的 函数 
http request= false; 
// 开 始 初 始 化 XMLHttpRequest 对 象 
if (window.XMLHttpRequest){ 
//Mozilla 浏览 器 
http request=new XMLHttpRequest () 7 
if(http request.overrideMimeType){ 
// 设 置 MiME 类 别 
http request.overrideMimeType ("text/xml"); 
} else if (window.ActiveXObject){ 
// 王 浏览 器 
try{ 
http_request=new ActiveXObject ("Msxml2 .XMLHTTP"); 
}catch(e){ 
try{ 
http_request=new ActivexObject ("Microsoft .XMLHTTP"); 
jcatch (e) {} 


} 

if(!http request){ 
// 异 常 ,创建 对 象 实 例 失败 
window.alert ("不 能 创建 xMLHttpRequest 对 象 实例 "); 
return false; 

} 

http_ request .onreadystatechange=processRequest2; 


// 确 定 发 送 请 求 的 方式 和 url 以 及 是 否 同步 执行 下 段 代码 
http_ request .open ("GET",url,true); 


http request.send (null); 
} 
// 处 理 返回 信息 的 函数 
function processRequest2(){ 
if(http request.readystate==4){ 
// 判 断 对 象 状态 
// 信 息 已 经 成 功 返 回 ,开始 人 处理 信息 
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if(http request.status==200){ 
subType.innerHTMI— http request.responseText; 


J}elsef{f 
alert (' 请 求 的 界面 异常 1'); 


alert (http request.responseText); 


8.4 ”Web 开发 框架 


在 Java Web 应 用 程序 开发 时 ,目前 流行 许多 Web 开发 框架 。 使 用 开发 框架 可 以 保 
证 快速 开发 出 具有 良好 架构 .易于 扩展 .易于 管理 维护 的 Web 应 用 程序 。 使 用 框架 的 目 
的 是 使 混乱 的 东西 变 得 结构 化 。Web 开发 框架 就 是 鼓励 开发 人 员 使 用 一 系列 框架 所 提 
供 的 基础 类 和 类 库 , 避 免 JSP 造成 的 混乱 。 使 用 框架 不 是 因为 它 能 让 你 做 什么 ,而 是 因 
为 它 限制 你 做 什么 。 

本 节 的 内 容 简 单 介绍 几 种 常见 的 Web 开发 框架 ,为 继续 学 习 Web 开发 技术 指明 一 
个 方向 。 


8.4.1 Struts 


Struts 是 Apache 软件 组 织 提 供 的 一 项 开放 源码 项 目 , 它 是 一 个 基于 Sun J2EE 平台 
的 MVC 框架 ,主要 采用 Servlet 和 JSP 技术 来 实现 ,尤其 适用 于 开发 大 型 可 扩展 的 Web 
应 用 。Struts 具有 很 高 的 可 配置 性 ,一 个 前 端 控 制 组件 、 一 系列 动作 类 动作 上 映射 .处 理 
XML 的 实用 工具 类 以 及 服务 器 端 JavaBeans 的 自动 填充 .支持 验证 的 Web 表单 .国际 化 
支持 、 生 成 HTML 表现 逻辑 和 模版 组 成 了 Struts 的 灵魂 。 由 于 Struts 能 充分 满足 应 用 
开发 的 需求 ,简单 易 用 ,敏捷 迅速 .受到 大 家 的 关注 。Struts 把 Servlet、JSP、 自 定义 标签 
和 信息 资源 (message resources) 整 合 到 一 个 统一 的 框架 中 ,开发 人 员 利 用 其 进行 开发 时 
不 用 再 自己 编码 实现 全 套 MVC 模式 , 极 大 地 节省 了 时 间 ,所 以 说 Struts 是 一 个 非常 不 错 
的 应 用 框架 。 

Struts 这 个 名 字 来 源 于 在 建筑 和 旧式 飞机 中 使 用 的 支持 金属 架 。Struts 为 Web 应 用 
提供 了 一 个 通用 的 框架 ,使 得 开发 人 员 可 以 把 精力 集中 在 如 何 解 决 实际 业务 问题 上 。 此 
外 ,Struts 框架 提供 了 许多 供 扩展 和 定制 的 地 方 ,应 用 程序 可 以 方便 的 扩展 框架 ,来 更 好 
的 适应 用 户 的 实际 需求 。 


8.4.2 WebWork 


WebWork 是 一 个 开放 源 代码 项 目 . 目 标 是 为 在 短 时 间 内 构建 复杂 网 站 提供 易于 理 
解 和 维护 的 工具 及 开发 框架 。WebWork 是 一 个 强大 的 基于 Web 的 MVC 框架 , 它 构建 
在 一 个 命令 模式 框架 XWork 之 上 。 
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WebWork 有 如 下 特性 : 

(1) 具有 用 于 处 理 或 代理 请 求 的 分 发 器 (Dispatcher) 。 

(2) 能 够 支持 多 种 视图 技术 (JSP、Velocity、JasperReports、XML、FreeMarker) 的 结 
果 类 型 。 

(3) 拥有 一 个 小 而 强大 的 JSP 标签 库 和 Velocity 宏 定 义 。 

(4) 分 发 器 调用 XWork 活动 来 访问 和 操作 模型 (Model) 并 为 视图 显示 模型 数据 提 
供 方便 的 途径 。 

WebWork 真正 的 优势 在 于 它 强 调 简洁 和 协作 能 力 的 根本 理念 ,使 用 WebWork 将 有 
助 于 最 小 化 代码 ,使 开发 人 员 更 多 的 关注 业务 逻辑 (business logic) 和 建 模 (modeling) ,而 
不 是 编写 Servlet 之 类 的 事情 。 


8.4.3 Spring 


Spring 是 一 个 开源 框架 , 它 由 Rod Johnson 创建 。 它 是 为 了 解决 企业 应 用 开发 的 复 
杂 性 而 创建 的 。Spring 使 用 基本 的 JavaBean 来 完成 以 前 只 可 能 由 EJB 完成 的 事情 。 然 
而 ,Spring 的 用 途 不 仅 限 于 服务 器 端的 开发 。 从 简单 性 .可 测试 性 和 松 耦 合 的 角度 而 言 ， 
任何 Java 应 用 都 可 以 从 Spring 中 受益 。 

Spring 之 所 以 存在 ,是 希望 J2EE 更 加 易 用 ,可 用 更 简单 的 方法 进行 J]2EE 开发 ,同时 
又 不 牺牲 平台 的 性 能 。Spring 在 其 核心 部 分 提供 了 一 个 易于 配置 的 .XML 了 驱动 的 反 向 
控制 (IoC) 容 器 。IoC 基于 所 谓 的 “好 莱 坞 原则 ”一 一 不 要 给 我 们 打 电 话 ,我 们 会 找 你 。 在 
这 种 方案 中 ,应 用 程序 中 Java 对 象 之 间 的 关系 是 由 容器 注入 的 ,而 不 是 通过 直接 编程 实 
现 的 。 注 入 分 两 种 形式 一 一 构造 函数 注入 和 setter 注入 ,这 取决 于 容器 是 通过 其 构造 函 
数 还 是 通过 mutator 方法 把 信息 注入 一 个 已 创建 的 Java 对 象 。 

Spring 可 以 将 简单 的 组 件 配置 、 组 合成 为 复杂 的 应 用 。 在 Spring 中 ,应 用 对 象 , 例 如 
注入 属性 或 引用 其 他 bean ,都 是 通过 一 个 XML 文件 进行 配置 的 声明 式 地 进行 组 合 , 这 使 
得 配置 变 得 非常 直接 。 

Spring 提供 了 很 多 基础 功能 (事务 管理 .持久 化 框架 集成 等 ) ,Spring 与 一 个 AOP 框 
架 耦 合 在 一 起 ,而 该 框架 支持 非 侵入 性 地 添加 诸如 事务 和 安全 这 样 的 属性 ,这 意味 着 开发 
人 员 可 以 集中 精力 创建 用 于 解决 业务 问题 的 解决 方案 ,而 不 会 为 J2EE 开发 或 配置 的 复 
杂 性 而 头痛 。 因 为 该 容器 是 非 侵 入 性 的 ,所 以 开发 人 员 不 必 担 心 业务 代码 会 被 特定 于 供 
给 商 ( 此 处 也 包括 Spring) 的 工件 所 污染 。 


8.4.4 JVC 


JVC 是 英文 Java View Control 的 简称 ,中 文 含义 为 Java 视图 -控制 开发 框架 。JVC 
的 目标 是 构建 一 个 快速 开发 .可 维护 的 .稳定 的 Web 开发 框架 ,通过 开放 源 代 码 , 互 相 促 
进 开 发 技术 。JVC 参考 了 目前 比较 流行 的 WebWork、Struts、Spring 的 Web 开发 框架 的 
思想 ,在 开发 过 程 中 简化 了 的 视图 -控制 框架 ,弱化 了 模型 层 . 弱 化 模型 层 的 目的 是 减少 模 
型 中 大 部 分 的 重复 工作 。 

JVC 主要 有 以 下 特点 : 
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1) 开发 简单 快速 

大 部 分 开发 不 需要 写 JavaBean, 系 统 自 带 的 Action 能 满足 90% 需 求 ,只 需要 编写 
page 文件 (控制 文件 ) 与 视图 jsp。 

2) 提供 了 Web 系统 开发 过 程 中 都 需要 开发 的 通用 用 户 权 限 管理 

可 以 控制 角色 对 每 个 Command 的 访问 权 。 

3) 提供 功能 强大 的 验证 框架 

使 用 表达 式 编写 验证 公式 ,支持 所 有 逻辑 表达 式 , 并 且 前 台 JSP( 生 成 javascript 脚 
本 ) 和 后 台 Servlet( 提 交 到 后 台 的 request 参数 ) 均 可 以 调用 。 

4) 可 维护 性 

一 般 修 改 了 数据 库 表 需要 同时 修改 M、V .需要 重新 编译 .虽然 简单 ,但 带 来 了 繁琐 的 
操作 ,而 且 有 可 能 引起 其 他 错误 .而 JVC 框架 弱化 了 M, 不 需要 编写 对 象 关系 映射 的 类 ， 
而 是 用 命名 规范 使 得 对 于 大 部 分 的 修改 只 是 需要 修改 VCJSP 页 面 )。 

5) 自 定义 Action 可 独立 调试 

一 般 Action 由 于 需要 从 request 得 到 参数 而 无 法 进行 独立 调试 ,而 JVC 框架 借鉴 了 
WebWork 方法 把 HTTP 的 请 求 封装 为 ActionContent 类 ,除了 交互 和 使 用 上 的 方便 外 ， 
实现 了 往往 开发 Web 比较 困难 的 独立 调试 。 并 且 为 下 一 步 升 级 到 Web 十 EJB 或 其 他 分 
布 式 架构 打下 了 基础 。 

Web 开发 框架 有 很 多 ,有 兴趣 的 读者 可 以 在 实践 中 去 发 现 与 了 解 它 们 。 


8.5 思考 与 练习 


8.5.1 思考 题 


8-1 MVC 三 个 英文 字母 的 含义 是 什么 ? 
8-2 ”什么 是 MVC 的 基本 原则 ? 

8-3 MVC 有 什么 作用 ? 

8-4 有 哪些 Web 开发 框架 ? 


8.5.2 上 机 练习 
使 用 MVC 模式 编写 一 个 信息 发 布 . 展 示 、 查 询 与 删除 的 应 用 程序 。 
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网 站 开发 各 阶段 的 任务 


前 面 的 各 章 介绍 了 网 站 编程 的 基本 技术 。 要 开发 网 站 除了 掌握 一 些 网 站 编程 的 技术 
外 ,还 要 知道 如 何 进行 需求 分 析 、 网 站 规划 、 网 站 系统 设计 等 网 站 开发 前 期 的 准备 工作 , 因 
为 网 站 开发 是 一 项 大 工程 ,涉及 多 个 方面 ,只 有 做 好 了 各 种 前 期 的 规划 、 分 析 、 设 计 、 分 工 
等 工作 ,才能 快速 正确 的 开发 一 个 优秀 的 网 站 。 本 章 将 以 一 个 “网 上 体育 用 品 商 店 ” 网 站 
的 开发 作为 实例 。 

本 章 主 要 解决 以 下 问题 : 

。 网 站 开发 有 哪些 阶段 ; 

。 为 什么 要 进行 网 站 需求 调查 与 分 析 ; 

。 为 什么 要 进行 网 站 规划 与 网 站 设计 ; 

。 怎样 编写 网 站 需求 调查 与 分 析 报 告 ; 

。 怎样 编写 网 站 开发 规划 书 ; 

。 怎样 编写 网 站 设计 说 明 书 。 


9.1 网 站 开发 阶段 


本 节 主 要 介绍 网 站 开发 过 程 的 各 个 阶段 及 任务 。 

开发 一 个 网 站 ,大 致 可 以 分 为 网 站 开发 项 目 立 项 、 网 站 需求 调查 与 分 析 、 网 站 规划 、 网 
站 设计 、 网 站 制作 、 网 站 宣传 推广 、 网 站 运行 维护 等 阶段 。 

(1) 网 站 开发 项 目 立项 阶段 : 主要 任务 是 确定 开发 项 目 。 

(2) 网 站 需求 调查 与 分 析 阶 段 : 主要 任务 是 进行 网 站 需求 调查 与 分 析 , 编 写 网 站 需 
求 调查 与 分 析 报 告 。 

(3) 网 站 规划 阶段 : 主要 任务 是 进行 网 站 定位 ,确定 网 站 的 目的 和 功能 ,编写 网 站 开 
发 规划 书 。 

(4) 网 站 设计 阶段 : 主要 任务 是 进行 网 站 内 容 设 计 、 网 站 结构 设计 等 ,编写 网 站 设计 
说 明 书 。 

(5) 网 站 制作 实现 阶段 : 主要 任务 是 用 HTML、JSP、ASP 等 网 站 开发 技术 制作 
网 页 。 
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(6) 网 站 宣传 推广 阶段 : 主要 任务 是 向 亲朋 好 友 推 荐 ,在 搜索 引擎 登记 ,在 新 闻 组 和 
BBS 上 作 宣 传 等 。 

(7) 网 站 运行 维护 阶段 : 主要 任务 是 测试 网 络 , 网 页 的 日 常 维护 ,网 站 的 宣传 推广 ， 
网 站 的 优化 与 更 新 ,网 站 的 备份 与 恢复 。 

下 面 将 开发 背景 限定 在 用 户 和 开发 人 员 两 类 人 员 上 ,主要 介绍 项 目 立项 .需求 调查 与 
分 析 、 网 站 规划 、 网 站 设计 阶段 的 内 容 。 读 者 可 充当 这 两 种 角色 。 


9.2 项 目 立 项 阶段 


本 节 主 要 介绍 项 目 立 项 阶段 的 主要 任务 一 一 确定 开发 项 目 , 即 为 谁 开 发 一 个 什么 类 
型 的 网 站 。 

现在 越 来 越 多 的 企业 、 单 位 、 组 织 要 开发 功能 强大 的 网 站 或 浏览 器 /服务 器 模式 的 管 
理 信息 系统 。 所 以 ,会 有 越 来 越 多 的 用 户 有 开发 网 站 的 需求 。 当 用 户 有 了 开发 网 站 的 需 
求 , 经 过 用 户 与 开发 人 员 双 方 不 断 的 接洽 和 了 解 ,并 通过 基本 的 可 行 性 讨论 ,可 初步 达成 
开发 网 站 协议 ,这 时 就 需要 将 项 目 立 项 ,签订 项 目 立 项 书 。 

接着 要 成 立 一 个 专门 的 开发 网 站 项 目 小 组 ,小 组 成 员 包 括 项 目 经 理 ,网 页 设计 员 , 编 
程 员 ,测试 员 ,编辑 /文档 员 等 。 一 般 项 目 实行 项 目 经 理 制 。 

在 学 生 学 习 过 程 中 可 以 成 立 开 发 网 站 项 目 小 组 ,以 团队 的 力量 共同 来 开发 一 个 网 站 。 


9.3 网 站 需求 调查 与 分 析 阶 段 


本 节 的 内 容 主要 介绍 网 站 需求 调查 分 析 阶 段 的 主要 任务 ,要 清楚 开发 一 个 具有 什么 
内 容 、 什 么 功能 的 网 站 , 即 网 站 都 有 什么 ,都 能 干什么 。 具 体 工作 任务 如 下 所 述 。 


9.3.1 明确 网 站 开发 的 目的 


在 确定 用 户 要 开发 一 个 网 站 后 ,开发 人 员 首 先 要 明确 用 户 为 什么 要 建立 这 个 网 站 ? 
是 为 了 给 顾客 提供 服务 ,还 是 要 在 网 上 宣传 自己 的 公司 .产品 ,是 在 网 上 介绍 知识 .以 网 会 
友 ,还 是 要 给 自己 的 企业 建立 一 个 电子 商务 网 站 ,只 有 给 这 些 问 题 一 个 满意 的 答案 ,才能 
说 明明 确 了 建站 的 目的 ,下 面 的 工作 才能 有 一 个 明确 的 方向 。 


9.3.2 网 站 需求 调查 与 分 析 


当 明 确 网 站 开发 的 目的 后 .开发 人 员 接 着 要 确定 网 站 包括 的 主要 内 容 和 功能 ,通过 网 
站 的 内 容 和 功能 实现 网 站 开发 的 目的 。 网 站 的 内 容 是 否 全 面 、 是 否 符合 顾客 的 需要 ,网 站 
的 功能 是 否 完善 .是 否 满足 用 户 的 使 用 要 求 ,直接 决 定 了 网 站 开发 的 成 败 。 网 站 应 该 包括 
哪些 内 容 和 功能 呢 ? 这 个 问题 可 以 在 网 站 需求 分 析 阶 段 来 解决 。 

网 站 需求 分 析 阶 段 就 是 专门 解决 网 站 的 需求 ,网 站 需求 从 开发 人 员 的 角度 来 划分 可 
以 分 为 内 容 需 求 和 网 站 的 功能 需求 ;从 用 户 角 度 来 考虑 可 以 分 为 用 户 实际 需求 和 用 户 发 
展 需 求 。 
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一 个 网 站 项 目的 确立 是 建立 在 各 种 各 样 的 需求 上 面 的 ,这 种 需求 往往 来 自 于 用 户 的 
实际 需求 或 者 是 出 于 公司 自身 发 展 的 需要 ,其 中 用 户 的 实际 需求 占 了 绝 大 部 分 。 面 对 使 
用 网 站 不 同 层 面 的 用 户 , 开 发 人 员 对 用 户 需 求 的 理解 程度 ,在 很 大 程度 上 决定 了 网 站 开发 
项 目的 成 败 。 因 此 如 何 更 好 地 的 了 解 、 分 析 、 明 确 用 户 需 求 , 并 能 使 用 准确 、 清 晰 的 文档 形 
式 表 达 出 用 户 需求 ,使 参与 项 目 开发 的 每 个 成 员 在 开发 过 程 中 能 够 按照 满足 用 户 需 求 为 
目的 的 正确 方向 进行 各 种 工作 ,是 需求 分 析 阶 段 解决 的 主要 问题 。 

要 解决 需求 分 析 阶 段 的 问题 , 先 要 进行 调查 工作 。 调 查 工 作 可 分 为 以 下 两 种 类 型 : 


1. 用 户 需 求 调查 


为 了 更 好 地 进行 需求 分 析 , 开 发 人 员 首 先 要 进行 用 户 需 求 调查 。 在 调查 中 要 做 到 以 
下 几 点 : 

1) 让 用 户 畅所欲言 ,罗列 出 所 有 的 需求 

让 用户 将 所 有 的 想法 尽 可 能 的 阐述 清楚 ,并 把 所 有 的 要 求 罗 列 出 来 ,不 要 遗漏 。 这 时 
候 开 发 人 员 不 要 害怕 “勾引 ?出 客户 的 潜在 需求 而 增加 网 站 开发 的 工作 量 , 直 接 明白 的 把 
用 户 的 问题 和 要 求 一 条 条 地 列 出 来 ,将 用 户 最 原始 、 最 完整 的 需求 准确 地 记录 下 来 就 完成 
了 调查 的 第 一 步 工作 。 这 个 调查 工作 要 多 次 进行 ,并 要 调查 各 种 类 型 的 用 户 。 可 在 调查 
前 编写 调查 表 。 

2) 透 过 现象 分 析 用 户 潜在 的 需求 

用 户 往 往 对 需求 的 概念 是 非常 模糊 的 ,提出 的 需求 一 般 分 不 清 是 内 容 需 求 还 是 功能 
需求 .是 实际 需求 还 是 发 展 需求 ,大 多 时 候 给 出 的 需求 都 是 笼统 而 且 尺 度 难 以 控制 的 ,这 
就 要 求 开 发 人 员 在 倾听 了 用 户 的 详细 说 明 以 后 ,进行 整理 和 分 析 , 同 时 预测 用 户 在 开发 过 
程 中 变更 及 今后 应 用 中 可 能 进行 修改 升级 的 潜在 需求 。 

所 以 用 户 需 求 调查 的 第 二 步 就 是 开发 人 员 要 将 用 户 描 述 的 需求 进行 分 析 、 归 纳 和 整 
理 , 特 别 要 分 析 整 理 出 用 户 谈 的 不 多 却 是 技术 上 实现 难度 和 强度 很 高 的 地 方 。 

例如 ,在 为 用 户 设 计 办 公 自 动 化 系统 的 时 候 , 也 许 就 要 为 用 户 预 留 将 来 与 他 们 的 业务 单 
位 进行 交互 的 通道 ;在 设计 邮件 系统 的 时 候 要 考虑 可 能 会 需要 广告 管理 服务 器 ;设计 网 络 电 
子 商 店 时 可 以 考虑 今后 增加 库存 产品 进 销 存 统计 分 析 的 功能 等 等 ;限于 时 间 财 力 的 考虑 , 客 
户 通常 能 够 接受 分 阶段 实施 的 开发 过 程 。 在 进行 用 户 需 求 分 析 时 ,提早 为 用 户 设 想到 今后 
的 需求 变更 除了 使 项 目 开 发 更 加 顺利 以 外 ,也 为 今后 业务 的 进一步 深入 打下 了 更 好 的 基础 。 

3) 编写 用 户 需 求 调查 报告 

用 户 需求 调查 的 最 后 一 步 工 作 是 编写 一 个 用 户 需 求 调查 报告 。 主 要 内 容 包 括 进行 了 
什么 样 调查 、 调 查 规模 、 调 查 了 哪些 用 户 、 调 查 的 覆盖 率 、 不 同 用 户 的 需求 (用 户 提 出 的 需 
求 和 经 过 开发 人 员 不 断 引 导 和 分 析 挖 掘 出 的 潜在 需求 ) 。 

用 户 需求 调查 报告 需要 让 用 户 阅 读 通过 并 签字 认可 。 把 好 编写 用 户 需 求 调查 报告 这 
一 关 , 可 以 杜绝 很 多 因为 需求 不 明 或 理解 偏差 造成 的 失误 和 项 目 失败 。 

需求 调查 报告 的 撰写 ,要 尽 可 能 用 自然 的 语言 进行 描述 ,因为 用 户 的 水 平和 资历 可 能 
有 所 不 同 ,所 以 要 使 用 通俗 易 懂 的 自然 语言 来 描述 ,使 项 目 开发 人 员 和 用 户 都 能 清楚 地 理 
解 网 站 需求 的 含义 ,不 至 于 在 理解 上 产生 偏差 。 对 用 户 而 言 ,这 样 的 需求 描述 最 接近 真 
实 ,容易 参与 修订 ,并 能 以 此 为 测试 和 验收 的 依据 。 
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比较 以 下 两 份 关于 需求 的 描述 : 

(1) 用 户 在 访问 主页 的 时 候 单 击 “ 会 员 天 地 ”按钮 ,弹出 填写 “用 户 名 ”和 “密码 ”的 页 
面 ,输入 正确 的 “用 户 名 ”和 “密码 ”后 将 在 新 页 面 中 打开 “会 员 天 地 ”的 首页 ,在 该 页 显示 所 
有 会 员 可 以 使 用 的 功能 导航 条 和 最 新 的 导读 新 闻 链 接 列 表 。 

(2) 站 点 分 为 公开 和 加 密 两 种 状态 ,通过 身份 验证 机 制 使 特有 的 用 户 可 以 访问 到 加 
密 信息 ,并 提供 不 同 于 普通 用 户 的 功能 。 

前 段 描述 可 以 很 容易 想象 出 制作 完成 后 网 站 是 什么 样子 ,而 后 一 段 的 描述 可 能 会 做 
出 无 数 不 同 的 版 本 ,造成 对 需求 理解 的 歧义 。 


2. 对 类 似 网 站 进行 调查 


开发 人 员 还 要 对 类 似 网 站 进行 调查 ,目的 是 了 解 目前 类 似 网 站 的 情况 ,了 解 当 前 类 似 网 
站 的 内 容 和 功能 ,以 拓宽 思路 ,使 功能 更 完善 ,设计 更 合理 。 根 据 调 查 结果 ,结合 要 开发 的 网 
站 的 特点 ,通过 仔细 讨论 与 分 析 , 给 要 开发 的 网 站 提出 一 些 新 的 功能 需求 和 内 容 需 求 。 


3. 类 似 网 站 调查 报告 


对 类 似 网 站 的 调查 也 要 编写 一 份 网 站 调查 报告 ,主要 内 容 包括 : 

1) 调查 规模 

调查 了 哪些 网 站 ,调查 的 落 盖 率 。 

2) 调查 的 内 容 

被 调查 网 站 所 具有 的 内 容 特色 、 功 能 特点 。 

3) 调查 的 收获 

根据 调查 情况 提出 开发 网 站 的 内 容 参 考 建议 和 网 站 功能 的 参考 建议 。 


9.3.3 编写 需求 分 析 报 告 


在 用 户 需 求 调查 和 类 似 网 站 调查 报告 的 基础 上 ,开发 人 员 要 经 过 多 次 讨论 和 认真 分 
析 研 究 编 写 一 份 网 站 需求 分 析 报 告 。 


1. 网 站 需求 分 析 报 告 主要 内 容 


1) 确定 网 站 的 用 户 角 色 

即 哪些 人 员 浏 览 和 使 用 网 站 。 如 访客 会员、 重要 客户 .前 台 管 理 员 、 网 站 管理 员 、 业 
务 员 等 。 

2) 分 析 用 户 需求 

使 用 示意 图 描述 不 同 用 户 角色 的 需求 。 分 析 确 定 每 个 角色 的 权限 及 可 操作 的 功能 ， 
比如 会 员 可 以 查看 特别 信息 、 修 改 个 人 信息 、 退 出 登录 等 :前 台 管 理 员 能 够 登录 的 管理 系 
统 , 能 够 发 布 编辑 修改 信息 ,能 够 审查 会 员 资 格 等 :网 站 管理 员 还 可 以 更 改 栏目 .修改 网 站 
界面 等 。 制 作 流 程 图 和 示意 图 将 用 户 需求 表现 出 来 ;可 以 让 用 户 参 与 到 示意 图 的 设计 中 ， 
这 样 可 以 正确 的 反映 用 户 的 需求 。 

3) 使 用 文字 和 功能 体系 图 描述 网 站 要 为 用 户 角色 提供 哪些 服务 

根据 用 户 需 求 , 使 用 文字 和 功能 体系 图 描述 网 站 要 为 用 户 角色 提供 哪些 功能 服务 
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内 容 。 


2. 需求 分 析 报 告 部 分 内 容 实例 


1) 网 站 名 称 

网 站 名 称 为 “体育 用 品 商店 ”。 

2) 网 站 用 户 细 分 

。 个 人 顾客 : 体育 用 品 主要 面向 儿童 .青年 人 和 休闲 一 族 。 儿 童 喜欢 活泼 可 爱 、 年 
轻 人 倾向 时 尚 与 活力 ,而 中 年 的 休闲 族 注重 品位 与 身份 。 

。 团体 顾客 : 随 着 人 们 生活 水 平 的 提高 ,在 健身 娱乐 方面 表现 出 强大 的 需求 。 在 体 
育 用 品 市 场 有 巨大 的 消费 潜力 。 在 小 区 健身 ,全 民 健 身 的 氛围 下 ,大 的 团体 采购 
活动 已 经 出 现 并 有 进一步 升温 的 趋势 。 为 满足 这 一 市 场 需要 ,要 求 网 站 为 这 些 大 
的 团体 提供 便捷 的 服务 。 

。， 网 站 新 闻 管理 员 : 负责 网 站 新 闻 发 布 编辑 修改 工作 。 

。 网 站 市 场 调 查 管理 员 : 负责 市 场 调查 的 标题 内 容 发 布 编辑、 修改 等 工作 。 

。 网 站 维护 管理 员 : 负责 数据 库 的 管理 ,页面 更 新 等 工作 。 

。 网 站 销售 管理 员 : 负责 网 上 订单 查询 .打印 订单 等 工作 。 

3) 用 户 需 求 特点 分 析 

用 户 需 求 特点 可 使 用 示意 图 来 描述 ,如 图 9. 1 所 示 描 述 了 三 种 顾客 的 需求 特点 。 


追求 时 尚 与 活力 ， 言 欢 热 阐 ， 
= 在 人 气 旺 的 地 方 聚 集 ， 是 最 
大 的 消费 群体 


青年 人 
六 
似 
温 
三 
Oe 讲求 品质 、 价格 与 信誉 
> 是 最 具 购 买 力 的 用 户 
团体 采购 客户 
Ezyg 
蕊 
wm 
过 求 品位 与 质量 . 一 般 能 成 为 
一 人 | 公司 的 固定 客户 ， 需 要 提供 
A 周到 的 售 前 售后 服务 
休闲 族 


图 9.1 用 户 需求 特点 示意 图 
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4) 网 站 为 用 户 提供 的 服务 
可 使 用 文字 和 功能 体系 图 描述 网 站 要 为 用 户 角色 提供 的 服务 ,如 图 9. 2 所 示 描 述 了 
提供 给 顾客 、 会 员 的 不 同 服务 。 


体育 新 闻 浏览 ， 最 新 产品 信息 获取 ， 产 品 
搜索 ， 发 布 招聘 信息 ， 介 绍 产 品 知识 ， 在 
线 保修 ， 将 来 还 要 提供 电子 商务 服务 


| 
Oe 

) 
青年 团体 采购 


时 尚 的 新 品 展示 ， 品牌 专栏 ， 高 品位 网 上 洽谈 及 联系 


聚集 人 气 的 在 线 质量 产品 ， 组 建 休 周到 便捷 的 在 线 
论坛 及 聊天 室 闲 族 俱乐部 服务 支持 
| 1 
一 般 会 员 服 务 


(如 价格 优惠 等 ) 


俱乐部 会 员 
价格 优惠 
俱乐部 活动 等 


图 9.2 功能 体系 图 


9.4 网 站 规划 阶段 


本 节 的 内 容 主要 介绍 网 站 开发 规划 书 的 主要 内 容 , 它 是 网 站 规划 阶段 的 标志 性 成 果 。 

开发 一 个 网 站 , 离 不 开 事先 的 详尽 规划 和 精心 设计 。 俗 话说 得 好 ,“ 良 好 的 开端 是 成 
功 的 一 半 ”。 对 于 网 站 开发 ,所 谓 的 “良好 的 开端 "就 是 要 有 一 个 详尽 细致 的 网 站 开发 方 
案 , 这 个 开发 方案 就 是 网 站 开发 规划 书 , 它 是 所 开发 网 站 的 一 个 总 体 框架 。 根据 这 个 框 
架 , 就 可 以 按部就班 地 实现 整个 网 站 的 开发 工作 , 既 可 以 提高 效率 ,又 可 以 节约 时 间 , 还 有 
利于 规范 网 站 的 总 体 布局 ,实现 统一 的 网 站 风格 ,为 创建 网 站 打下 良好 的 基础 。 

网 站 规划 阶段 的 工作 是 在 网 站 开发 前 面 两 个 阶段 的 基础 上 做 的 工作 总 结 , 根 据 需 求 
分 析 报 告 对 网 站 开发 建设 中 所 需要 的 内 容 、 功 能 、 技 术 、 费 用 测试、 维护 等 做 出 书面 的 ,全 


局 的 规划 。 
网 站 开发 规划 书 主要 内 容 包 括 : 
1. 市 场 分 析 


(1) 相关 网 站 的 市 场 是 怎样 的 ,市 场 有 什么 样 的 特点 ,是 否 能 够 在 互联 网 上 开展 公司 
业务 。 
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(2) 市 场 主要 竞争 者 分 析 ,竞争 对 手 上 网 情况 及 其 网 站 规划 、 功 能 作用 。 
(3) 公司 自身 条 件 分 析 、 公 司 概况 、 市 场 优势 ,可 以 利用 网 站 提升 哪些 竞争 力 ,建设 网 
站 的 能 力 ( 费 用 、 技 术 、 人 力 等 )。 


2. 开发 网 站 的 目的 及 功能 类 型 定位 


(1) 确定 网 站 的 目的 。 为 什么 要 建立 网 站 ,是 为 了 宣传 产品 ,进行 电子 商务 ,还 是 建 
立行 业 性 网 站 ? 是 企业 的 需要 还 是 市 场 开拓 的 延伸 ? 

(2) 确定 网 站 的 功能 类 型 。 根 据 公 司 的 需要 和 计划 ,确定 网 站 功能 类 型 : 产品 宣传 
型 .网 上 营销 型 .客户 服务 型 .电子 商务 型 等 。 

(3) 根据 网 站 功能 类 型 ,确定 网 站 应 达到 的 目标 要 求 。 


3. 网 站 技术 解决 方案 


根据 网 站 的 功能 确定 网 站 技术 解决 方案 。 

(1) 采用 自 建 服务 器 ,还 是 租用 虚拟 主机 。 

(2) 选择 操作 系统 ,用 UNIX、Linux 还 是 Window 2000/NT。 分 析 投 入 成 本 、 功 能、 
开发 .稳定 性 和 安全 性 等 。 

(3) 采用 系统 性 的 解决 方案 (如 IBM, HP 等 公司 提供 的 企业 上 网 方案 、 电 子 商务 解 
决 方案 )? 还 是 自己 开发 。 

(4) 网 站 安全 性 措施 , 防 黑 、 防 病毒 方案 。 

(5) 相关 功能 程序 开发 使 用 什么 开发 技术 ,是 使 用 JSP、ASP 还 是 CGI 等 。 


4. 网 站 内 容 与 功能 要 求 


(1) 确定 网 站 名 称 

在 建站 的 初期 ,应 给 网 站 起 一 个 好 名 字 。 站 点 名 称 起 着 很 重要 的 作用 , 它 在 很 大 程度 
上 决定 了 整个 网 站 的 定位 。 一 个 好 的 名 字 必 须 有 概括 性 、 简 短 、 要 合理 、 有 特色 、 易 记 (6 
个 字 内 ) ,还 要 符合 自己 站 点 的 主题 风格 。 例 如 : 新 浪 网 、 搜 狐 、 网 易 。 

(2) 根据 网 站 的 目的 和 需求 分 析 划 分 网 站 的 主要 页 面 内 容 及 包括 的 主要 功能 模块 

一 般 企 业 网 站 应 包括 公司 简介 .产品 介绍 、 服 务 内 容 、 价 格 信息 、 联 系 方式 .网 上 订单 
服务 等 主要 页 面 。 

电子 商务 类 网 站 要 提供 会 员 注 册 .详细 的 商品 服务 信息 、 信 息 搜索 查询 、 订 单 确认 、 付 
款 . 个 人 信息 保密 措施 .相关 帮助 等 功能 模块 。 

(3) 确定 网 站 各 功能 模块 内 容 概要 ,可 考虑 采用 网 站 编程 专人 负责 相关 栏目 模块 内 
容 的 准备 、 开 发 工作 。 

(4) 确定 网 站 的 层次 数 , 画 出 网 站 的 结构 图 。 


5. 网 站 设计 要 求 


(1) 网 页 美术 设计 要 求 。 
网 站 的 功能 不 仅仅 局 限于 传递 信息 , 它 在 宣传 方面 的 功能 丝毫 不 亚 于 报刊 杂志 等 传 
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统 媒体 ,一 个 优秀 的 网 站 和 一 个 实际 存在 的 公司 一 样 , 需 要 整体 的 形象 包装 和 设计 。 网 页 
美术 设计 一 般 要 与 企业 整体 形象 一 致 ,要 符合 CI 规范 ,CI(Corporate Identity) 就 是 通过 
视觉 来 统一 企业 的 形象 。 要 注意 网 页 色彩 、 图 片 的 应 用 及 版 面 规划 ,保持 网 页 的 整体 一 
致 性 。 

(2) 在 新 技术 的 采用 上 要 考虑 主要 目标 访问 群体 的 分 布地 域 .年 龄 阶层 、 网 络 速 度 、 
阅读 习惯 等 。 

(3) 制定 网 页 改版 计划 ,如 半年 到 一 年 时 间 进 行 较 大 规模 改版 等 。 

(4) 确定 网 站 整体 风格 

开发 网 站 时 要 根据 设计 原则 和 针对 访问 者 确定 网 站 适宜 的 整体 风格 。 如 果 浏 览 者 主 
要 是 年 轻 人 ,页 面 就 要 设计 得 基调 明快 ,活泼 富有 朝气 ;如 果 用 户主 要 群体 是 政府 工作 者 
或 科学 工作 者 ,那么 页 面 就 要 设计 得 严谨 、 严 肃 理性、 科学 ;如 果 用 户主 要 群体 是 恋人 或 
从 事 艺术 工作 的 人 ,页 面 就 要 设计 得 浪漫 并 有 艺术 感 ; 如 果 用 户主 要 群体 是 妇女 儿童 ,页 
面 则 要 设计 得 温 世 、 友 爱 、 轻 松 。 

确定 网 站 整体 风格 后 ,还 要 针对 不 同 栏目 设计 其 特有 的 风格 ,具体 体现 在 内 容 安 排 、 
链接 结构 .CI 要 素 等 诸多 元 素 上 ,要 围绕 栏目 中 心思 想 ,用 独特 的 视觉 语言 进行 艺术 化 的 
特色 设计 。 


6. 网 站 维护 说 明 


(1) 服务 器 及 相关 软 硬 件 的 维护 ,对 可 能 出 现 的 问题 进行 评估 ,制定 响应 时 间 。 

(2) 数据 库 维护 ,有 效 地 利用 数据 是 网 站 维护 的 重要 内 容 , 因 此 数据 库 的 维护 要 受到 
重视 。 

(3) 制定 内 容 的 更 新 、 调 整 的 时 间 计 划 。 

(4) 制定 相关 网 站 维护 的 规定 ,将 网 站 维护 制度 化 规范化 。 

7. 网 站 测试 说 明 


网 站 发 布 前 要 进行 细致 周密 的 测试 ,以 保证 正常 浏览 和 使 用 。 主 要 测试 内 容 : 
(1) 服务 器 稳定 性 、 安 全 性 。 

(2) 程序 及 数据 库 测 试 。 

(3) 网 页 兼容 性 测试 ,如 浏览 器 .显示 器 。 

(4) 根据 需要 的 其 他 测试 。 


8. 网 站 发 布 与 推广 计划 


(1) 网 站 测试 后 进行 发 布 的 公关 ,广告 活动 计划 。 
(2) 搜索 引擎 登记 等 。 


9. 网 站 建设 日 程 表 

10. 网 站 开发 费用 预算 明细 

网 站 规划 书 对 网 站 开发 建设 起 到 计划 和 指导 的 作用 .对 网 站 的 内 容 和 维护 起 到 定位 
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作用 ,也 可 以 作为 用 户 和 开发 人 员 之 间 的 协议 或 合同 ,是 以 后 网 站 验收 的 标准 。 一 个 网 站 
的 成 功 与 否 与 建站 前 的 网 站 规划 有 着 极为 重要 的 关系 。 


9.5 网 站 设计 阶段 


本 节 主 要 介绍 网 站 设计 报告 的 具体 内 容 。 
9.5.1 网 站 设计 方法 


在 网 站 需求 分 析 和 网 站 规划 的 基础 上 , 接 下 来 可 以 进行 网 站 设计 的 具体 工作 了 。 

网 站 设计 阶段 的 主要 工作 是 网 站 内 容 和 功能 的 具体 设计 ,要 解决 如 何 展示 网 站 浏览 
的 内 容 、 如 何 实现 网 站 的 功能 。 具 体 任务 包括 网 站 主页 结构 设计 、 主 要 栏目 主页 设计 、 确 
定 各 页 面 的 内 容 和 功能 、 网 站 导航 与 链接 模式 设计 .网 站 目录 结构 设计 等 。 它 是 进行 网 站 
实际 制作 前 的 准备 工作 ,网 站 设计 阶段 的 成 果 是 一 一 网 站 开发 设计 说 明 书 , 它 就 像 建筑 工 
程 的 施工 图 纸 , 网 站 设计 说 明 书 为 开发 人 员 对 网 站 的 具体 制作 提出 了 具体 的 接近 实际 的 
要 求 。 编 写 网 站 设计 说 明 书 是 网 站 开发 工作 中 的 一 个 关键 环节 。 

进行 网 站 设计 首先 要 决定 采用 什么 样 的 方法 来 进行 网 站 开发 设计 。 和 一 般 软 件 系 统 
设计 的 方法 类 似 ,网 站 开发 设计 也 有 自 顶 向 下 、 自 底 向 上 和 从 中 间 开始 等 设计 方法 。 

这 里 介绍 网 站 设计 * 自 顶 向 下 ,逐步 细 化 "的 结构 化 .模块 化 的 方法 。 所 谓 自 顶 向 下 ， 
就 是 从 整个 网 页 的 主页 (项), 常 说 的 HomePage 开始 设计 ,向 下 一 层 一 层 地 展开 。 采 用 
这 种 设计 方法 ,在 开始 实现 网 页 时 可 以 先 用 一 些 空 的 网 页 构筑 起 整个 网 站 的 框架 , 按 模 抉 
开发 相关 的 应 用 程序 ,然后 再 一 步 一 步 地 向 框架 中 增加 内 容 .逐步 细 化 ,直至 最 后 完成 束 
个 网 站 的 制作 。 

采用 这 种 设计 方法 的 优点 是 能 在 总 体 上 统一 整个 网 站 的 界面 风格 ,使 网 页 的 组 织 结 
构 比较 合理 。 用 这 种 方法 ,通常 一 开始 就 做 出 一 个 所 谓 的 “模板 ", 作 为 以 后 页 面 设计 的 基 
而 ,这样 就 能 保证 整个 网 站 系统 界面 的 版 面 风格 和 功能 设置 的 一 致 性 。 

在 网 站 制作 时 , 先 将 网 站 的 各 个 栏目 作为 一 个 链接 放 在 主页 上 ,以 形成 网 站 一 个 总 的 
概 狐 ,然后 分 别 实现 各 个 栏目 的 主页 和 二 级 页 面 ,以 及 各 个 页 面 中 需要 的 功能 模块 ,最 后 
充实 主页 上 的 链接 ,直到 最 后 实现 所 有 的 功能 ,网 站 就 开发 成 功 了 。 

网 站 设计 的 成 果 是 一 一 网 站 设计 说 明 书 。 下 面 分 别 介绍 网 站 设计 的 内 容 。 

9.5.2 网 站 标题 设计 

网 站 标题 包括 网 站 名 称 和 logo 标志 。 每 一 个 网 站 都 要 有 一 个 响亮 的 名 字 和 独 具 风 
格 的 logo 标志 。 例 如 著名 的 雅虎 ,搜狐 .新 浪 等 。 好 的 网 站 名 称 能 简单 明了 地 体现 出 这 
个 网 站 的 主题 ,同时 具有 很 好 的 吸引 力 。 标 志 也 同样 要 设计 得 简单 而 独 具 特 色 。 网 站 的 
logo 如 同 商标 一 样 ,是 网 站 特色 和 内 涵 的 集中 体现 ,要 让 大 家 看 
见 logo 就 联 想起 该 网 站 。 标 志 可 以 是 中 文 , 英 文字 母 ,可 以 是 。 揣 全 #4 丧 
符号 ,图 案 ,可 以 是 动物 或 者 人 物 等 。 如 新 浪 用 字母 sina 十 眼睛 
作为 标志 ,如 图 9. 3 所 示 。 四 
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9.5.3 网 站 的 内 容 与 功能 设计 


网 站 的 内 容 与 功能 都 体现 在 各 个 网 页 上 ,所 以 下 面 主要 说 明 几 个 主要 页 面 的 设计 。 
1. 首页 
首页 具有 简单 、 鲜 明 的 特点 .吸引 浏览 者 的 目光 ,指引 用 户 到 主页 。 


例如 ,“ 网 上 体育 用 品 商 店 ” 网 站 的 首页 设计 为 : 网 站 标题 包括 一 个 美术 化 的 网 站 文 
字 名 称 和 专门 设计 的 图 片 形式 的 logo 标志 ;一 个 给 浏览 者 以 强烈 视觉 冲击 的 flash 品牌 
宣传 图 片 ;一 个 进入 主页 的 连接 按钮 ,如 图 9.4 所 示 。 
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图 9.4 “网 上 体育 用 品 商店 网 站 的 首页 


网 站 的 主页 要 尽 可 能 地 将 本 站 的 所 有 内 容 和 功能 栏目 展现 出 来 ,要 最 大 可 能 地 将 主 
页 做 成 整个 网 站 的 缩 略 图 ,使 得 用 户 只 要 浏览 过 主页 ,就 能 对 网 站 有 一 个 比较 清晰 的 印 
象 ,主页 还 要 提供 通 向 各 个 主要 栏目 模块 的 链接 和 会 员 、 管 理 员 登 录入 口 。 

在 主页 的 风格 设计 中 ,色彩 的 使 用 也 非常 的 重要 。 在 选择 色彩 的 时 候 , 既 不 能 太 过 鲜 
艳 , 让 人 觉得 刺 目 难受 ,也 不 能 过 于 沉闷 ， 看 得 让 人 提 不 起 精神 来 。 

在 主页 的 结构 设计 中 ,可 将 主页 划分 成 几 个 部 分 分 别 设计 。 这 里 介绍 的 是 先 分 为 上 
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中 下 ,再 把 中 间 部 分 分 为 两 块 。 

(1) 主页 的 上 部 是 网 站 标题 和 网 站 标语 图 片 或 主要 广告 ,网 站 的 多 数 栏目 模块 的 连 
接 也 会 放 在 上 部 ,使 用 户 可 以 很 方便 在 网 页 上 部 就 能 进入 他 〈 她 ) 所 需要 的 页 面 中 。 

(2) 网 页 的 中 间 部 分 一 般 就 是 网 站 的 各 个 功能 页 面 的 简化 版 本 的 组 合 , 如 介绍 几 条 
最 新 最 有 吸引 力 的 新 闻 , 放 上 几 个 最 新 产品 介绍 ,或 搞 一 个 简单 的 分 类 浏览 等 等 。 一 般 中 
间 部 分 占 页 面 的 比例 较 大 。 还 可 以 分 为 左右 两 部 分 。 左 边 为 小 标题 。 右 边 为 小 标题 连接 
的 内 容 。 

(3) 网 页 的 下 部 给 出 联系 方式 ,版 权 信 息 、 与 其 他 相关 网 站 的 链接 和 其 他 内 容 。 

例如 ,“ 网 上 体育 用 品 商店 ”网 站 的 主页 设计 :; 上 部 一 一 网 站 标题 . 列 出 通 向 网 站 各 个 
栏目 模块 的 导航 条 ,为 静态 内 容 ; 中 部 左上 方 一 一 提供 一 个 进入 功能 模块 “会 员 注册 和 合 
录 ” 的 入口 和 进入 功能 模块 “管理 员 维 护 ” 的 入 口 ,左下 方 一 一 为 由 数据 库 提供 的 滚动 的 体 
育 新 闻 ( 动 态 内 容 )。 中 部 右上 方 一 一 是 一 个 动态 的 图 片 , 旨 在 营造 一 个 动感 时 尚 的 氛围 ， 
中 部 右 下 方 一 一 是 一 个 显示 欢迎 用 户 的 计数 器 ,为 动态 内 容 。 主 页 下 部 一 给 出 联系 方 
式 、 版 权 信 息 和 其 他 链接 内 容 , 为 静态 内 容 , 如 图 9.5 所 示 。 
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图 9.5 “网 上 体育 用 品 商 店 ” 网 站 的 主页 


3. 网 站 主要 栏目 设计 


主要 栏目 设计 包括 各 个 栏目 的 主页 和 二 级 功能 页 面 的 设计 。 
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栏目 主页 要 包括 该 栏目 的 主要 内 容 介 绍 、 到 各 个 二 级 功能 页 面 的 接口 (链接 )。 要 使 
浏览 者 一 进入 该 页 面 ,就 能 知道 本 栏目 提供 哪些 服务 ,可 以 浏览 哪些 内 容 。 

二 级 功能 页 面 是 根据 内 容 和 功能 需要 使 用 的 页 面 ,可 在 制作 时 具体 确定 ,只 要 注意 提 
供 返 回 栏目 主页 面 和 网 站 主页 的 链接 即 可 。 

下 面 以 * 网 上 体育 用 品 商店 ?为 例 说 明 一 些 主要 栏目 页 面 的 设计 。 

1) 关于 公司 栏目 

关于 公司 栏目 主页 主要 包括 公司 简介 、 公 司 文化 ,公司 新 闻 、 诚 聘 人 才 的 简要 内 容 , 并 
提供 到 这 几 个 内 容 的 二 级 页 面 链接 。 

公司 简介 页 面 介绍 公司 的 概况 和 发 展 历程 ,为 静态 页 面 。 

公司 文化 页 面 宣 传 公司 经 营 理念 ,倡导 健康 时 尚 充满 活力 的 企业 文化 ,为 静态 页 面 。 

诚 聘 人 才 页 面向 社会 发 布 最 新 招聘 信息 , 诚 邀 有 识 人 才 加 盟 发 展 ,为 动态 页 面 。 这 里 
要 提供 一 个 登记 人 才 信 息 到 数据 库 的 功能 。 

2) 体育 动态 栏目 

体育 动态 栏目 分 为 国内 国外 新 闻 等 页 面 ,还 有 很 多 各 类 赛事 的 专栏 页 面 ,如 足球 、 
NBA \ 体 操 等 。 这 是 本 站 吸引 人 气 的 主要 栏目 。 因 而 要 力求 迅速 ,更 新 速度 要 快 ,各 个 页 
面 要 注 明 更 新 日 期 。 让 用 户 浏览 最 新 的 国内 外 体育 赛事 、 发 表 评论 。 这 里 页 面 比较 多 ,而 
且 经 常 变 换 , 网 站 要 保持 几 个 栏目 的 高 质量 ,转载 发 表 高 水 平 的 文章 ,图 文 并 茂 , 从 内 容 和 
形式 上 吸引 读者 。 这 里 将 使 用 数据 库 建立 一 个 体育 新 闻 分 布 .更 新 系统 。 

3) 市 场 信息 栏目 

第 一 时 间 发 布 最 新 的 市 场 信息 ,为 动态 页 面 ,用 户 可 在 此 页 面向 公司 提出 个 人 购买 和 
团体 购买 需求 ,这 里 将 使 用 数据 库 建 立 一 个 提交 产品 订单 的 系统 。 

4) 关于 产品 栏目 

关于 产品 栏目 的 页 面 可 直接 显示 新 产品 发 布 .服饰 类 、 鞋 类 、 器 具 类 等 多 个 页 面 ,为 动 
态 页 面 。 用 户 可 以 从 中 获取 各 个 商品 的 详细 介绍 ,每 个 商品 都 配 有 图 片 ,图 文 并 茂 , 这 里 
将 使 用 数据 库 建立 一 个 提供 产品 查询 、 用 户 “ 购 物 车 ”的 系统 ,方便 用 户 查询 和 购买 产品 。 

5) 服务 中 心 栏目 

该 栏目 下 包括 以 下 几 个 二 级 功能 页 面 : 

服务 热线 页 面 ,详细 介绍 各 个 分 店 地址 、 联 系 电话 等 信息 ,方便 用 户 就 近 购 买 , 为 静态 
页 面 。 
在 线 报修 页 面 ,包括 一 个 用 户 可 以 登记 报修 信息 的 数据 库 系统 ,公司 根据 用 户 提供 的 
信息 可 以 按 用 户 要 求 的 时 间 提 供 上 门 服务 。 

运动 知识 页 面 ,向 用 户 提 供 一 些 运动 过 程 中 的 常识 和 注意 事项 ,为 静态 页 面 。 

顾客 登记 页 面 ,包括 一 个 用 户 可 以 登记 注册 成 为 会 员 的 数据 库 系统 。 

产品 咨询 页 面 ,包括 一 个 产品 咨询 数据 库 系统 ,用 户 可 以 查询 产品 题库 中 的 问题 答 
案 。 若 没有 解答 ,不 久 后 该 问题 的 解答 将 会 发 到 用 户 邮 箱 中 。 

6) 好 友 论 坛 栏 目 

进入 网 站 为 喜爱 运动 的 网 友 建 设 的 好 友 论 坛 , 用 户 可 以 在 里 面 发 表 自己 的 见解 ,交流 
心得 和 体会 。 包 括 BBS 、 聊 天 室 。 
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7) 会 员 天 地 栏目 
提供 使 用 会 员 留 言 短 .聊天 室 、 参 加 各 种 调查 活动 的 人口。 
网 站 主要 栏目 示意 图 描述 ,如 图 9.6 所 示 。 
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图 9.6 网 站 主要 栏目 示意 图 


9.5.4 目录 结构 设计 


目录 结构 设计 也 称 为 网 站 物理 结构 设计 ,物理 结构 是 指 网 站 文件 的 物理 存储 结构 , 即 
网 站 文件 在 服务 器 上 存储 的 方式 。 

由 于 设计 一 个 网 站 会 涉及 许多 文件 和 目录 ,同时 在 设计 的 过 程 中 也 会 生成 许多 文件 ， 
包括 页 面 文件 ,程序 代码 等 。 如 何 合理 地 放置 这 些 文件 和 目录 对 于 顺利 地 进行 开发 工作 
也 是 很 重要 的 。 特 别 是 在 网 站 的 开发 初期 就 合理 地 规划 好 目录 结构 ,对 于 设计 网 页 是 很 
有 好 处 的 。 如 果 网 站 规模 很 小 ,网 页 文件 也 不 多 ,最 简单 的 方法 就 是 给 整个 网 站 建立 一 个 
目录 ,将 所 有 的 文件 和 图 片 文件 都 放 在 该 目录 下 面 。 复 杂 的 网 站 可 以 按 网 站 的 内 容 结构 
分 成 不 同 的 部 分 ,每 个 部 分 从 结构 上 来 说 是 相对 独立 的 。 

例如 ,“ 网 上 体育 用 品 商 店 ” 网 站 的 所 有 网 页 文件 都 放 在 应 用 服务 器 下 的 fess 目录 
中 ,fess 目录 下 为 每 个 栏目 建立 一 个 子 目录 ,以 便于 未 来 管理 页 面 的 方便 。 图 片 统一 放 在 
image 目录 中 ,文件 名 都 使 用 简短 的 英文 或 中 文 拼音 字母 命名 。 

目录 结构 设计 要 使 用 文档 资料 进行 记录 ,方便 查询 、 增 加 ,维护 与 使 用 。 


9.5.5 导航 与 交互 设计 
1. 导航 设计 


导航 设计 要 解决 的 问题 是 页 面 位 置 、 去 向 、 路 径 、 返 回 方法 。 导 航 设计 有 以 下 类 型 。 
272s 册 


(1) 超 文本 链接 : 非 顺序 的 通过 超 文 本 链接 起 来 ,使 用 户 按 使 用 的 顺序 和 意愿 浏览 
信息 。 

(2) 导航 栏 : 放置 在 固定 位 置 的 多 个 标题 的 超 链 接 。 可 以 是 文字 或 图 片 。 一 般 有 大 
型 导航 条 、 小 型 导航 条 、 导 航 目录 。 

(3) 网 站 地 图 : 以 图 形 的 方式 显示 站 点 中 所 有 的 页 面 和 栏目 部 分 、 内 容 分 类 列表 等 。 
显示 的 是 网 站 的 逻辑 结构 ,逻辑 结构 是 网 站 在 运行 时 抽象 出 来 的 拓扑 结构 , 它 是 建立 在 物 
理 结 构 之 上 的 。 网 站 地 图 一 般 专门 提供 一 个 链接 的 页 面 。 


2. 交互 设计 


交互 设计 要 解决 的 问题 : 解决 互相 作用 、 互 相交 流 的 方式 问题 ;解决 信息 传递 和 选择 
性 问题 。 人 机 交互 设计 要 注意 交互 的 简易 性 (让 计算 机 多 做 工作 ) ,友好 性 (主观 操作 简单 
交互 容易 )。 还 要 注意 交互 的 灵活 性 、 明 确 性 一 致 性 、 容 错 性 .反馈 性 、 图 形 化 。 

人 机 交互 的 常用 方式 有 : 问答 式 、 菜 单 式 、 功 能 键 \. 图 符 、 查 询 语 言 界面 、 自 然 语言 界 
面 。 要 注意 菜单 层 数 不 能 太 多 , 即 菜单 交互 功能 深度 。 菜 单 宽 度 不 要 过 大 , 即 同 层 中 菜单 
项 总 数 。 


3.“ 网 上 体育 用 品 商店 ”网 站 中 导航 设计 


每 个 页 面 都 包含 网 站 标志 , 单 击 网 站 标志 可 通 向 网 站 主页 面 ,每 个 页 面包 含 到 各 个 
栏目 版 块 的 导航 条 和 网 站 地 图 ,方便 用 户 在 本 站 内 浏览 ,进入 各 个 功能 页 面 。 对 于 超 
文本 链接 ,用 户 访问 过 和 未 访问 的 分 别 用 不 同 的 颜色 显示 。 在 每 个 页 面 设置 “返回 主 
页 ”的 链接 。 


9.5.6 网 页 版 面 布局 设计 


网 页 版 面 布局 设计 统一 设计 了 网 站 所 有 页 面 的 布局 ,而 且 在 设计 定型 之 后 一 般 就 很 
少 修改 。 有 时 候 将 网 页 版 面 布 局 设计 称 为 "模板 设计 ”, 以 后 各 页 面 的 详细 设计 和 实现 都 
是 基于 这 个 模板 展开 的 。 

网 页 版 面 设 计 是 在 限定 的 面积 范围 内 ,合理 安排 布置 图 片 . 图 像 和 文字 的 位 置 。 版 面 
布局 样式 主要 有 "T" 字 型 “ 口 ? 字 型 三? 字 型 “ 川 ? 字 型 和 自由 型 ,如 图 9.7 所 示 。 

例如 ,网 上 体育 用 品 商店 ”网 页 版 面 布 局 特点 是 ,网 页 的 版 面 分 成 三 个 部 分 : 顶部 网 
站 标题 与 导航 条 区 .中 部 页 面 主 要 内 容 显示 区 和 底部 信息 提示 区 。 

除了 中 部 的 工作 区 各 个 页 面 不 相同 外 ,顶部 和 底部 的 内 容 所 有 页 面 基本 相同 。 具 体 
来 说 ,页 面 的 项 部 包含 了 网 站 的 标题 (各 个 主要 栏目 页 面 可 显示 不 同 标题 名 称 ) ;网 站 导航 
栏 ( 所 有 页 面 都 相同 ) ,通过 导航 栏 可 以 进入 到 网 站 的 任何 一 个 部 分 ;底部 区 包括 的 内 容 比 
较 简单 ,如 返回 首页 链接 和 一 些 版 权 信息 等 。 而 对 于 页 面 的 中 部 显示 区 不 同 的 页 面 差别 
就 很 大 了 。 如 网 站 首页 显示 的 内 容 比 较 全 面 , 它 几 乎 包含 了 本 网 站 所 有 内 容 的 缩小 版 本 。 
其 他 功能 页 面 可 能 显示 的 是 查询 的 结果 、 产 品 介绍 等 。 
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图 9.7 版 面 布 局 样式 


9.5.7 网 站 外 观 设计 


网 站 在 宣传 方面 的 功能 丝毫 不 亚 于 报刊 杂志 等 传统 媒体 ,一 个 优秀 的 网 站 和 一 个 实 
际 存在 的 公司 一 样 ,需要 整体 的 形象 包装 和 设计 。 网 站 外 观 设计 包括 网 页 色彩 设计 、CI 
设计 ,版 面 设 计 、 风 格 与 创意 设计 等 。 如 使 用 统一 的 项 目 符号 ,统一 的 网 站 标志 等 。 


1. 网 站 色彩 设计 


网 站 色彩 设计 非常 重要 ,打开 一 个 网 站 ,给 用 户 留 下 第 一 印象 的 既 不 是 网 站 丰富 的 内 
容 和 完善 的 功能 ,也 不 是 网 站 合理 的 版 面 布局 ,而 是 网 站 的 色彩 。 色 彩 对 人 的 视觉 效果 非 
常 明 显 ,一 个 网 站 设计 成 功 与 否 , 在 某 种 程度 上 取决 于 设计 者 对 色彩 的 运用 和 搭配 。 

因为 网 页 设计 属于 一 种 平面 效果 设计 ,在 排除 立体 图 形 、 动 画 效果 之 外 ,在 平面 图 上 ， 
色彩 的 冲击 力 是 最 强 的 , 它 很 容易 给 用 户 留 下 深刻 的 印象 。 因 此 ,在 设计 网 页 时 ,必须 要 
高 度 重视 色彩 的 搭配 。 

要 合理 地 选取 页 面 的 背景 色 , 而 且 一 旦 选 定 了 网 站 的 主 背 景色 ,所 有 其 他 色彩 的 使 用 
都 要 围绕 它 展开 , 要 选择 那些 能 很 好 地 融入 到 主 背 景色 中 的 颜色 , 决 不 要 使 用 与 之 相对 立 
的 颜色 。 

一 个 网 站 不 可 能 单一 的 运用 一 种 颜色 .让 人 感觉 单调 ,乏味 ;但 是 也 不 可 能 将 所 有 的 
颜色 都 运用 到 网 站 中 ,让 人 感觉 轻浮 ,花哨 。 一 个 网 站 必须 有 一 种 或 两 种 主题 色 , 不 至 于 
让 客户 迷失 方向 ,也 不 至 于 单调 ,乏味 。 一 个 页 面 尽量 不 要 超过 4 种 色彩 ,用 太 多 的 色彩 
让 人 没有 方向 ,没有 侧重 。 当 主题 色 确 定好 以 后 ,考虑 其 他 配色 时 ,一 定 要 考虑 其 他 配色 
与 主题 色 的 关系 ,要 体现 什么 样 的 效果 。 


2. 网 站 的 CI 设计 
网 站 的 CI 设计 包括 以 下 内 容 : 
”2 了 级 | 


(1) 网 站 标志 。 

(2) 网 站 标准 色彩 ,标准 色彩 是 指 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 一 个 网 站 的 
标准 色彩 不 超过 3 种 , 太 多 则 让 人 眼花 综 乱 。 标 准 色彩 要 用 于 网 站 的 标志 ,标题 , 主 菜单 
和 主 色 块 。 给 人 以 整体 统一 的 感觉 。 至 于 其 他 色彩 也 可 以 使 用 ,只 是 作为 点 级 和 衬托 , 绝 
不 能 喧 宾 夺 主 。 例 如 IBM 网 站 的 深蓝 色 , 肯 德 基 网 站 的 红色 条 型 ,Windows 视窗 标志 上 
的 红 蓝 黄 绿色 块 ,都 使 人 觉得 很 贴切 ,很 和 谐 。 

(3) 网 站 标准 字体 ,和 标准 色彩 一 样 , 标 准 字体 是 指 用 于 标志 ,标题 , 主 菜单 的 特有 字 
体 。 一般 网 页 默认 的 字体 是 宋体 。 为 了 体现 站 点 的 “与 众 不 同 ” 和 特有 风格 ,可 以 根据 需 
要 选择 一 些 特别 字体 。 

(4) 网 站 宣传 标语 ,网 站 的 宣传 标语 可 以 说 是 网 站 的 精神 ,网 站 的 目标 。 用 一 句 话 甚 
至 一 个 词 来 高 度 概括 。 类 似 实际 生活 中 的 广告 金 句 。 例 如 : 更 梨 的 “味道 好 极 了 ”; 麦 斯 
威 尔 的 “好 东西 和 朋友 一 起 分 享 ”; Intel 的 “给 你 一 个 奔腾 的 心 ”。 

以 上 四 方面 : 标志 、 色 彩 、 字 体 、 标 语 是 一 个 网 站 树立 CI 形象 的 关键 ,确切 的 说 是 网 
站 的 表面 文章 ,设计 并 完成 这 几 个 任务 ,网 站 将 脱胎 换 骨 ,整体 形象 会 大 大 提高 。 色 彩 与 
字体 的 设计 可 以 专门 使 用 style 样式 文件 来 保存 ,以 利于 制作 各 个 页 面 时 使 用 。 


3. 版 面 设计 


所 谓 版 面 设 计 , 就 是 在 版 面 上 将 有 限 的 视觉 元 素 进 行 有 机 的 排列 组 合 ,将 理性 思维 个 
性 化 地 表现 出 来 ,是 一 种 具有 个 人 风格 和 艺术 特色 的 视觉 传达 方式 。 它 在 传达 信息 的 同 
时 ,也 产生 感官 上 的 美感 。 无 论 是 进行 电视 广告 .报纸 广告 .杂志 、 包 装 、 网 页 等 设计 ,都 需 
要 版 式 设计 。 

版 面 设计 是 现代 设计 艺术 的 重要 组 成 部 分 ,是 视觉 传达 的 重要 手段 。 表 面 上 看 , 它 是 
一 种 关于 编排 的 学 问 ; 而 实际 上 , 它 不 仅 是 一 种 技能 ,更 是 技术 与 艺术 的 高 度 统一 。 一 幅 
优秀 的 网 页 作品 , 它 有 了 好 的 创意 和 内 容 , 也 就 等 于 一 个 人 有 了 好 的 灵魂 。 版 面 设 计 就 好 
比 这 个 人 美妙 的 身材 ,二 者 相互 影响 与 融合 ,才能 使 观 者 视线 久久 难 移 , 产 生 震 撼 力 。 

网 页 的 版 面 设 计 要 主 次 分 明 , 中 心 突出 。 在 一 个 网 页 上 ,必然 要 考虑 视觉 的 中 心 ,这 
个 中 心 一 般 在 页 面 的 中 央 ,或 者 在 中 间 偏 上 的 部 位 。 因 此 ,一些 重要 的 文字 和 图 片 一 般 可 
以 安排 在 这 个 部 位 ,在 视觉 中 心 以 外 的 地 方 就 可 以 安排 那些 稍微 次 要 的 内 容 , 这 样 在 页 面 
上 就 突出 了 重点 ,做 到 了 主 次 有 别 。 

在 网 页 中 ,主题 要 成 为 视觉 中 心 ,吸引 人 的 视线 ,主题 不 鲜明 突出 ,会 扰乱 观 者 的 视觉 
流程 ,使 网 页 版 面 显 得 散乱 ,破坏 其 和 谐 。 一 幅 主题 不 鲜明 不 突出 的 网 页 ,就 好 比 一 堆 零 
乱 的 垃圾 ,无 法 让 冲浪 者 享受 到 美 。 版 面 设 计 的 最 终 目的 是 使 网 页 产生 清晰 的 条 理性 ,用 
悦目 的 组 织 来 更 好 地 突出 主题 ,达成 最 佳 的 表达 效果 。 

网 页 的 版 面 设计 要 注意 文字 与 图 片 的 布局 。 网 页 作为 一 种 版 面 , 既 有 文字 ,又 有 图 
片 。 文字 有 大 有 小 ,还 有 标题 与 正文 之 分 ;图 片 也 有 大 小 ,而 且 有 横竖 之 别 。 图 片 和 文字 
都 需要 同时 展示 给 观众 ,不 能 简单 地 罗列 在 一 个 页 面 上 ,这 样 往往 会 摘 得 杂乱 无 章 。 必 须 
根据 内 容 的 需要 ,将 这 些 图 片 和 文字 按照 一 定 的 次 序 进行 合理 编排 和 布局 ,使 它们 组 成 一 
个 有 机 的 整体 ,展现 给 广大 的 观众 。 文 字 和 图 片 还 具有 一 种 相互 补充 的 视觉 关系 ,一 个 网 
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页 页 面 上 的 文字 太 多 ,就 显得 沉闷 ,缺乏 生气 ;页 面 上 图 片 太 多 ,缺少 文字 ,就 会 减少 页 面 
的 信息 容量 。 因 此 ,最 理想 的 效果 是 文字 与 图 片 的 密切 配合 , 互 为 衬托 , 既 能 活跃 页 面 ,又 
使 网 页 有 丰富 的 内 容 。 

网 页 的 版 面 设计 要 注意 大 小 搭配 ,相互 呼应 。 较 长 的 文章 或 标题 ,不 要 编排 在 一 起 ， 
要 有 一 定 的 距离 ;同样 , 较 短 的 文章 ,也 不 能 编排 在 一 起 。 对 待 图 片 的 安排 也 是 这 样 ,要 互 
相 错 开 ,造成 大 小 之 间 有 一 定 的 间隔 ,这 样 可 以 使 页 面 错落 有 致 ,避免 重心 的 偏离 。 


4. 网 站 的 整体 风格 和 创意 设计 


风格 (style) 是 抽象 的 。 风 格 包 括 站 点 的 CI( 标 志 、 色 彩 、 字 体 、 标 语 ) 版面 布局 浏览 
方式 .交互 性 文字、 语气 .内 容 价值 .存在 意义 .站 点 荣誉 等 诸多 因素 。 

风格 是 独特 的 ,是 站 点 不 同 于 其 他 网 站 的 地 方 。 或 者 色彩 ,或 者 技术 ,或 者 是 交互 方 
式 , 能 让 浏览 者 明确 分 辨 出 这 是 你 的 网 站 独 有 的 。 

风格 是 有 人 性 的 。 通 过 网 站 的 外 表 、 内 容 、 文 字 、 交 流 可 以 概括 出 一 个 站 点 的 个 性 、 情 
绪 , 是 温文 儒雅 ,还 是 执著 热情 ;是 活泼 易 变 , 还 是 放任 不 由 。 

风格 是 建立 在 有 价值 内 容 之 上 的 。 例 如 ,希望 站 点 给 人 的 印象 是 专业 的 物流 电子 商 
务 网 站 ,应 该 有 创意 ,有 技术 实力 ,有 美感 ,有 冲击 力 ,可 以 信赖 ,信息 最 快 ,交流 方便 。 

创意 (idea) 是 网 站 生存 的 关键 。 实 质 上 ,创意 是 传达 信息 的 一 种 特别 方式 。 创 意 并 
不 是 天 才 者 的 灵感 ,而 是 思考 的 结果 。 创 意 是 将 现 有 的 要 素 重 新 组 合 。 创 意 的 目的 是 更 
好 的 宣传 推广 网 站 。 

例如 ,“ 网 上 体育 用 品 商 店 ” 网 站 在 外 观 设计 中 在 大 多 有 动态 的 网 页 中 一 致使 用 黑色 
的 背景 ,在 此 背景 下 通过 各 种 颜色 的 搭配 ,表现 动感 的 运动 之 美 。 

在 版 面 设计 上 ,运用 flash, 动 态 图 片 等 动感 视觉 元 素 有 机 结合 ,努力 向 浏览 者 传达 健 
康 、 向 上 .充满 活力 的 运动 理念 。 图 像 flash 的 制作 要 讲求 创意 富有 艺术 效果 ,将 运动 之 
美 融入 到 画面 中 ,从 而 给 浏览 者 以 强烈 的 视觉 冲击 。 

网 站 的 图 片 和 flash 设计 要 紧 紧 围绕 健康 时 尚 的 运动 主题 。 做 到 主 次 分 明 , 中 心 突 
出 。 由 于 “网 上 体育 用 品 商 店 ” 网 站 在 建设 初期 主要 注重 宣传 效果 ,因而 将 表现 力主 要 体 
现在 突出 企业 形象 上 。 首 页 中 心 放 一 个 flash 的 宣传 动画 片 ,在 主页 上 将 设计 一 个 表现 
体育 产品 的 动态 图 片 ,突出 强调 网 站 的 运动 主题 。 

在 各 栏目 的 网 页 外 观 设计 上 注重 图 文 并 茂 , 相 得 益 彰 。 形 成 鲜明 活泼 的 整体 风格 。 


9.5.8 页 面 详 细 设 计 


1. 页 面 详细 设计 内 容 ( 注 意 要 和 需求 分 析 说 明 相 结合 ) 


(1) 该 页 面 的 作用 ; 
(2) 该 页 面 要 反映 的 具体 内 容 ; 
(3) 该 页 面 要 使 用 的 图 片 动画、 声音 文件 的 内 容 .格式 等 要 求 ; 
(4) 确定 静态 和 动态 内 容 、 确 定 动态 功能 模块 使 用 什么 Web 开发 技术 工具 进行 
开发 。 
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2. 体育 用 品 网 站 主要 页 面 详 细 设 计 实 例 


1) 首页 

首页 的 作用 是 吸引 浏览 者 ,指引 用 户 到 主页 。 反 映 的 具体 内 容 包 括 黑 色 背 景 ,网 页 左 
边 是 网 站 名 称 和 标志 。 网 页 中 心 是 一 个 flash 品牌 宣传 片 ,在 flash 下 面 有 一 个 小 箭头 图 
片 , 用 户 单 击 后 可 进入 网 站 主页 面 。 首 页 使 用 一 个 flash 动画 文件 、 一 个 箭头 图 片 。 

该 页 面 没 有 功能 模块 。 使 用 HTML 技术 。 

2) 主页 

主页 的 作用 是 让 用 户 了 解 该 网 站 的 主要 内 容 、 功 能 和 服务 。 

反映 的 具体 内 容 与 素材 : 黑色 的 背景 ,页 面 上 方 网 站 动态 图 片 logo 和 使 用 
JavaScript 等 技术 编写 的 导航 栏 。 中 部 左 方 分 为 两 部 分 : 会 员 注册 登录 区 和 管理 员 登 录 
入 口 ,滚动 的 新 闻 标 题 ;中 部 右上 方 是 一 个 动态 的 GIF 图 片 , 一 些 动感 的 图 片 和 背景 协调 
地 搭配 在 一 起 。 营 造 出 一 种 动感 时 尚 的 氛围 ;中 部 右 下 方 是 显示 欢迎 用 户 的 计数 器 ;最 下 
面 是 联系 方式 和 一 些 链接 信息 。 

该 页 面 有 几 个 动态 功能 应 用 ,分 别 是 会 员 注 册 、 登 录 和 管理 员 入 口 .记录 访问 网 站 人 
数 的 计数 器 和 滚动 新 闻 标 题 及 链接 的 模块 ,该 页 面 要 使 用 JSP 等 技术 来 编写 这 些 动态 
内 容 。 

3) 体育 动态 栏目 主页 

该 页 为 体育 动态 栏目 的 主页 ,作用 是 及 时 反映 国内 外 体育 动态 。 具 体内 容 布局 : 中 
部 左边 是 各 个 热门 版 块 比如 足球 .NBA 等 的 栏目 链接 。 中 部 右上 方 采 用 滚动 方式 显示 最 
新 的 国内 国外 新 闻 。 中 部 右 下 方 是 几 个 主打 专栏 的 新 闻 信 息 , 在 热门 新 闻 前 加 醒目 标志 
提示 ,后 面 注 明 发 布 时 间 ,中间 放 些 图 片 .让 网 站 形式 更 丰富 一 些 。 页 面 上 漂浮 一 些 图 像 
链接 ,可 单 击 进入 相关 网 站 。 

发 布 新 闻 讲 求 时 效 性 ,因而 后 台 需 要 一 个 新 闻 发 布 数据 库 系 统 进行 支持 ,这 里 使 用 
JSP 和 MySQL 数据 库 技 术 开 发 新 闻 发 布 子 系统 。 


9.5.9 数据 库 设计 


网 站 涉及 许多 重要 数据 ,这 些 数据 中 包括 产品 信息 、 销 售 信息 .用户 信息 等 内 容 , 它 们 
对 于 网 站 的 建设 和 发 展 有 着 非常 重要 的 作用 ,对 这 些 数据 要 完成 保存 .查询 和 加 密 的 工 
作 ,使 用 数据 库 是 最 好 的 解决 办 法 。 


1. 数据 库 与 表 的 设计 


建立 网 站 的 时 候 , 建 立 多 少 个 数据 库 , 每 个 数据 库 中 有 多 少 张 表 ,开发 人 员 要 根据 所 
建 网 站 的 实际 情况 来 决定 。 这 之 中 有 数据 量 大 小 的 考虑 ,有 数据 更 新 频率 和 数量 的 考虑 ， 
有 数据 库 查 询 操 作 的 频繁 程度 的 考虑 ,还 有 管理 层次 上 的 考虑 ,等 等 ,可 以 说 需要 注意 和 
分 析 的 问题 是 非常 多 的 。 实 际 操作 之 前 必须 经 过 慎重 的 设计 工作 。 

数据 库 系 统 中 的 数据 是 企业 了 解 用 户 的 主要 渠道 ,是 企业 的 宝贵 资源 ,一 定 要 充分 利 
用 和 重视 。 数 据 库 系统 不 仅 要 有 存 取信 息 的 功能 .还 要 注意 数据 库 的 安全 性 和 条 理性 。 
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最 大 限度 获取 和 使 用 用 户 信息 。 
2. 数据 结构 规范 化 


数据 库 设计 的 关键 是 设计 数据 表 中 的 数据 项 (字段 ) ,要 符合 数据 结构 的 规范 化 要 求 ， 
最 大 限度 地 避免 数据 元 余 。 

一 般 的 数据 结构 要 满足 以 下 要 求 : 

(1) 在 表 ( 二 维 表 ) 中 任意 一 列 上 ,数据 项 应 属于 同一 属性 , 即 不 允许 有 重复 数据 项 。 

(2) 在 表 中 所 有 行 都 是 不 相同 的 ,不 允许 有 重复 的 行 。 

(3) 在 表 中 , 行 的 顺序 无 关 紧 要 。 

(4) 在 表 中 , 列 的 顺序 无 关 紧 要 ,但 不 能 有 重复 的 列 。 

(5) 每 个 数据 表 必 须 有 一 个 或 多 个 数据 项 组 合 构 成 的 主 关键 字 , 其 他 数据 项 元 素 要 
由 主 关键 字 来 确定 。 

(6) 非 主 关键 字 的 数据 项 元 素 之 间 相 互 独立 ,没有 函数 传递 依赖 关系 。 


9.6 网 站 开发 硬件 和 软件 准备 


本 节 主 要 介绍 在 网 站 具体 实现 前 的 软 硬 件 准 备 工作 。 
9.6.1 硬件 准备 


要 创建 一 个 网 站 ,需要 有 一 台 安 装 了 Web 服务 器 的 计算 机 。 但 不 是 任何 计算 机 都 能 
担当 网 站 服务 器 的 重任 ,这 是 因为 对 于 计算 机 的 要 求 还 是 比较 高 的 。 这 个 要 求 还 和 具体 
的 网 站 规模 、 网 站 的 访问 量 有 关 。 一 般 来 说 ,最 小 型 的 个 人 网 站 规模 大 概 是 在 任 一 时 刻 的 
访问 量 不 超过 5 个 ,这 样 的 网 站 建立 在 Pentium 4、128MB 内 存 的 计算 机 上 就 能 很 好 地 工 
作 。 所 使 用 的 服务 器 软件 也 是 比较 小 型 的 。 如 果 是 在 一 个 主机 超过 四 五 十 台 的 局 域 网 上 
建立 网 站 ,所 需 的 服务 器 至 少 得 有 128MB RAM ,CPU 工作 频率 应 在 300MHz 以 上 。 

可 以 把 网 站 建 在 比较 高 级 的 工作 站 上 ,如 管理 本 地 局 域 网 的 服务 器 ,甚至 可 以 把 网 页 
上 传 到 提供 个 人 主页 空间 服务 的 全 国 性 的 大 型 主机 上 ,这 样 就 能 保证 网 页 有 很 好 的 硬件 
环境 。 也 可 以 在 自己 的 机 器 上 建立 一 个 小 型 的 站 点 ,用 于 本 地 自己 主页 的 测试 。 


9.6.2 软件 准备 


首先 ,要 有 Web 服务 器 软件 。 现 在 流行 的 基于 PC 的 Web 服务 器 有 如 下 几 个 : 

(1) Windows 提供 的 Personal Web Server 和 IIS 。 

(2) Linux 的 Apache。 

(3) 支持 JSP 的 Tomcat。 

为 编制 网 页 代码 ,可 准备 一 个 能 自动 编写 静态 内 容 代 码 的 网 页 制作 工具 ,如 
FrontPage 等 。 因 为 动态 内 容 主 要 采用 手工 编写 代码 方式 ,可 使 用 EditPlus 编辑 器 或 
Eclipse。 
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9.7 网 站 开发 素材 的 收集 和 制作 


在 具体 开发 网 站 前 ,要 先进 行 素材 的 准备 和 收集 。 要 收集 各 个 网 页 需要 的 文字 素材 
和 图 片 素材 。 还 要 根据 需要 由 开发 人 员 自 己 制作 一 些 特殊 的 图 片 、 动 画 文 件 、flash 文件 、 
菜单 图 片 文字 图 片 等 。 这 部 分 工作 也 需要 花费 大 量 的 时 间 , 网 站 的 内 容 和 外 观 和 这 部 分 
工作 有 直接 的 关系 。 前 面 所 学 的 网 站 编程 技术 ,只 是 提供 一 个 通过 浏览 器 和 服务 器 中 显 
示 这 些 内 容 的 方法 。 这 部 分 工作 可 以 由 专人 负责 进行 收集 和 制作 。 

在 网 站 制作 实现 阶段 可 以 在 项 目 开 发 组 中 按 不 同 技术 或 不 同 栏 目 与 功能 模块 分 工 完 
成 网 站 网 页 的 制作 任务 、 测 试 任务 。 

当 网 页 制作 与 测试 任务 完成 后 ,要 将 开发 的 网 站 发 布 到 某 个 Web 服务 器 中 ,使 用 户 
浏览 与 使 用 ,此 时 网 站 开发 进入 到 网 站 宣传 推广 阶段 ,要 通过 各 种 方式 与 方法 向 亲朋 好 友 
推荐 ,在 搜索 引擎 登记 ,在 新 闻 组 和 BBS 上 作 宣 传 等 。 

网 站 发 布 后 即 进入 到 网 站 运行 维护 阶段 ,需要 对 网 页 进行 日 常 维护 ,包括 不 断 测试 网 
络 , 宣 传 与 推广 网 站 ,对 网 站 进行 优化 与 更 新 ,对 网 站 进行 备份 与 恢复 。 


9.8 思考 与 练习 


9.8.1 思考 题 


9-1 为 什么 要 把 网 站 开发 过 程 分 为 多 个 阶段 ? 
9-2 ”为 什么 要 编写 多 种 网 站 开发 报告 ? 


9.8.2 实践 练习 
9-1 成立 开发 网 站 项 目 小 组 : 确定 项 目 组 长 .项 目 组 成 员 分 工 、 讨 论 确定 网 站 开发 


9-2 ”编写 调查 表 , 对 不 同 的 网 站 用 户 进 行 需求 调查 ,并 编写 调查 报告 。 
9-3 ”调查 不 同类 型 的 网 站 , 写 出 调查 报告 ,包括 网 站 名 称 、 网 站 地 址 、 网 站 特色 ,分 析 
它们 在 页 面 内 容 、 功 能 、 结 构 、 导 航 与 交互 .布局 .色彩 、CI、 整 体 风格 等 方面 的 优 缺 点 。 
9-4 ”编写 网 站 需求 分 析 报 告 。 
主要 内 容 包 括 : 
(1) 初步 确定 的 网 站 名 称 ; 
(2) 确定 网 站 的 用 户 角 色 ( 即 哪些 人 员 浏 览 和 使 用 网 站 ); 
(3) 制作 流程 图 或 示意 图 描述 不 同 用 户 角色 的 所 有 需求 ; 
(4) 使 用 文字 和 功能 体系 图 描述 网 站 要 为 用 户 角 色 提 供 什么 服务 。 
9-5 ”编写 网 站 开发 规划 书 , 网 站 开发 规划 书 主要 内 容 : 
(1) 网 站 开发 背景 ; 
(2) 建设 网 站 目的 及 功能 定位 ; 
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(3) 网 站 技术 解决 方案 ; 

(4) 网 站 内 容 与 功能 规划 ; 

(5) 网 页 设计 要 求 ; 

(6) 网 站 测试 说 明 ; 

(7) 网 站 发 布 说 明 ; 

(8) 网 站 维护 说 明 。 

9-6 ”组 成 网 站 开发 小 组 ,编写 网 站 设计 说 明 书 。 内 容 包 括 : 
(1) 网 站 标题 设计 ; 

(2) 网 站 内 容 与 功能 设计 ( 按 页 面 和 功能 模块 ); 

(3) 网 站 目录 结构 设计 ; 

(4) 导航 与 交互 设计 ; 

(5) 网 页 版 面 布局 设计 ; 

(6) 网 站 外 观 设计 ; 

(7) 主要 页 面 详细 设计 (首页 .一 级 页 面 、 二 级 页 面 ); 
(8) 数据 库 设 计 。 
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网 站 开发 应 用 实例 


本 章 将 引导 读者 进入 网 站 开发 的 制作 阶段 , 通过 “网 上 体育 用 品 商 店 ” 网 站 的 开发 ， 
掌握 制作 导航 条 、 计 数 器 模块 .会 员 登 录 和 注册 应 用 程序 模块 , 深 动 新 闻 程 序 模块 模块 化 
的 主页 .用户 留 言 应 用 程序 的 方法 ,完成 一 个 网 站 首页 、 主 页 、 主 要 二 级 页 面 、 功 能 模块 相 
关 页 面 的 开发 任务 。 

本 章 主要 解决 以 下 问题 : 

。 如 何 使 用 公用 文件 ; 

。 制作 首页 有 哪些 注意 事项 ; 

。 制作 一 个 模块 化 的 主页 有 哪些 注意 事项 ; 

。 如 何 制作 动态 功能 模块 。 


10.1 制作 网 站 共用 文件 


本 节 主 要 介绍 网 站 通常 使 用 的 公用 文件 。 

创建 < 网 上 体育 用 品 商店 ”网 站 时 ,可 先 编 写 网 站 共用 的 程序 文件 ,例如 样式 表 文 件 、 
连接 数据 库 的 文件 、 公 用 的 函数 文件 .公用 的 导航 栏 、 公 用 的 顶部 、 底 部 页 面 文件 等 ,使 用 
这 些 公 用 的 文件 可 以 统一 网 站 的 风格 ,提高 代码 重用 性 。 


10.1.1 共用 的 CSS 样式 表 文 件 
1. 程序 文件 功能 说 明 


根据 网 站 设计 说 明 书 的 要 求 创建 style. css 样式 表 文 件 , 其 功能 是 统一 确定 网 站 页 面 
的 背景 .主题 色彩 文字 属性 、 链 接 、 位 置 、. 颜 色 等 内 容 。 


2. style. css 程序 代码 


下 面 给 出 style. css 样式 表 文 件 的 源 代 码 , 可 参考 使 用 。 
<!-- 链 接 的 颜色 和 特性 --> 


a:link{color:green;text— decoration:none} 
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a:visited{color:red;text— decoration:none} 
a:hover {color: #f£f00ff;text— decoration:underline} 
<!-- 背 景 颜色 和 背景 图 片 ---> 
body{background— color:"#FFFFFF"; background- image:"image/di .gif";} 
<!-- 网 站 名 称 的 样式 --> 
.bt{color:red;font- family: 华 文 彩云 ;font- size:40pt;} 
<!-- 注 意 文字 的 样式 --> 
-Zhuye { 
font- family: "楷体 _GB2312"; 
font- size: small; 
font— style: normal; 
text- decoration: blink; 
background- image: url('???????3?/????-???????? .files/ln news.gif'); 
} 
< !-- 新 闻 文字 的 样式 --> 
.news { 
font- family: "楷体 _GB2312"; 
Color: #FFCCOO; 
text- decoration: underline; 
} 
<!-- 向 用 户 表 示 欢 迎 文字 的 样式 --> 
.welcome { 
font- size: lpx; 
Color: #99ccff; 
background- color: # 999999; 
} 
<!-- 对 象 在 页 面 的 位 置 样式 --> 
.Layer0{ 
position:absolute; width:160px; height:]l5px; z- index:11; left: 155px; top: 175px; 
} 


.Layerl{ 

position:absolute; width:160px; height:215pxy z- index:11; left: 10px; top: 400px;} 
.Layer2{ 

position:absolute; width:400px; height:50px; z- index:11; left: 280px; top: 630px;} 
.Layer3{ 


position:absolute; width:366px; height:116pxy z- index:12; left: 270px; top: 300px;} 
.Layer4{position:absolute; z- index:12; left: 320px; top: 320px;} 
.Layer5{position:absolute; z- index:12; left: 10px; top: 660px;} 


注意 : style. css 文件 可 以 在 需要 时 不 断 添加 需要 的 标记 。 开 始 时 可 以 只 是 包含 共同 
使 用 的 一 些 基本 标记 。 


10.1.2 统计 登录 网 站 人 数 的 计数 器 程序 文件 


1. 程序 功能 说 明 


有 的 计数 器 不 够 科学 ,只 要 刷新 页 面 计 数 器 的 值 就 会 加 1。 计数器 程序 的 功能 是 在 
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用 户 第 一 次 登录 网 站 时 刷新 一 次 计数 器 的 值 , 但 再 次 刷新 页 面 时 不 添加 计数 ,除非 关闭 浏 
览 器 窗口 再 打开 时 才 会 添加 计数 。 

在 浏览 器 地 址 栏 输入 http://localhost:8080/myjsp/jsq2jsp,; 计 数 器 程序 运行 结果 如 
图 10.1 所 示 。 


地 址 (0) 着] FEE3ose6060I 地 92 x 加 #* 到 | tEE 


文件 已 编 贺 (E) 查看 WW 收藏 A) 工具 D 帮 有 DD  - 多 


图 10.1 计数 器 程序 运行 结果 


2. jsq2.jsp 程序 代码 
下 面 给 出 jsq2. jsp 计数 器 程序 文件 的 源 代码 ,可 参考 使 用 。 


< 多 
String s= (String)application.getAttribute ("count") 7 
String idl= session.getId(); 
String u=""; 
if(s==null) 
// 设 置 application 的 count 属性 值 为 1 
{ application.setAttribute ("count","1"); 
out.printin ("欢迎 你 ! 你 是 本 网 站 第 "+1+" 位 访问 者 。<br><br>");} 
else 
. 
if (session.isNew()) 
入 
s= (Integer.parseInt (s)+1)+""; 
application.setAttribute ("count",s); 
out.printin ("欢迎 你 ! 你 是 本 网 站 第 "+ s+" 位 访问 者 。<br><br>"); 


} 

else{ 

out.printin (" 欢 迎 你 ! 你 是 本 网 站 第 "+ s+" 位 访问 者 。<br><br>"); 
} 


名 > 


注意 : 在 计数 器 jsq2. jsp 程序 中 不 仅 使 用 了 jsp 技术 中 的 application 对 象 ,还 使 用 了 
session 对 象 ,使 用 application 的 count 属性 来 记录 访问 该 网 站 的 人 数 , 根 据 session. 
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isNew() 来 判断 用 户 是 不 是 新 登录 该 网 站 。 
10.1.3 导航 栏 程序 文件 


1. 程序 功能 说 明 


导航 栏 程序 文件 的 功能 是 不 仅 可 以 链接 到 网 站 各 个 栏目 的 主页 页 面 , 还 可 以 直接 链 
接 到 各 个 栏目 的 二 级 页 面 。 导航 栏 可 以 在 网 站 的 其 他 页 面 中 使 用 ,主要 用 在 主页 中 。 
图 10. 2 显示 的 是 该 导航 栏 的 显示 结果 。 当 鼠标 指向 栏目 标题 时 会 显示 该 栏目 下 的 主要 
功能 页 面 ,鼠标 离开 标题 ,下 面 的 小 标题 会 隐藏 起 来 。 


导航 条 - Microsoft Internet Explorer 
文件 (E) ”编辑 (E) ”查看 (VW) 收藏 (和 ) ”工具 (D 帮助 (H) 
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地 址 (0) 乱 ] http:// 


关于 产品 体育 动态 有 N 市 场 信息 好 友 论 坛 


图 10.2 导航 栏 程序 运行 结果 


2. 创建 导航 栏 使 用 的 功能 函数 文件 dht. js 


导航 条 具有 一 个 动态 功能 , 即 通过 滑动 鼠标 来 显示 和 隐藏 某 个 命名 区 域内 的 内 容 。 
功能 是 使 用 JavaScript 脚本 语言 实现 的 。 

为 了 使 程序 代码 清晰 ,将 创建 动态 功能 的 脚本 与 创建 页 面 格式 的 html 代码 分 开 ,将 
JavaScript 功能 函数 单独 存放 在 以 js 作为 后 缀 名 的 文件 中 。 这 种 方式 可 以 提高 程序 的 重 
用 性 ,使 程序 模块 化 。 其 他 文件 需要 时 可 以 直接 引用 js 文件 中 的 函数 。 

下 面 给 出 JavaScript 的 功能 函数 文件 dht.js 的 源 代码 ,可 参考 使 用 。 


function MM findobj (n, d) 
{ 
Var pi,x; 
if(!d)d= document; 
if((p=n.indexOof ("?"))> 0ggparent .frames.length) 
{ 
d=parent .frames [n.substring (p+ 1)] .document; 
n=n.substring (0,p); 
. 
if(! (x=d[n])&g&d.all) x=d.all[n]; 


for (i=0; Ix&&i<d.forms.length;i++) x=d.forms([i] [n]; 
for (i=0; lx&&d.layersg&i<d.layers.length;i++)x=MA findqobj (n,d.layers[i] .document); 
if(!x && d.getElementById)x=d.getElementById (n) 7 


return x; 


function MM showHideLayers () 
{ 
Var i,pv,obj,args=MM showHideLayers.arguments; 
for (i=0;i< (args.length-— 2); i+=3)if((obj=MM findobj (args [il))!=null) 
{v=args [i+ 2]; 
if (obj .style) 
{ 
Obj=obj.style; 
V= (v== "show')? 'visible': (v== 'hide')? 'hidden':v; 
} 
obj .visibility=V7 
} 


3. dht. htm 程序 代码 
下 面 给 出 导航 栏 程序 文件 dht. htm 的 源 代码 ,可 参考 使 用 。 


<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset= gb2312"> 
<title> 导 航 条 < /title> 

<script src="dht.js" language= "JavaScript" type= "text/javascript"> 
</script> 

<link href="css/style.css" rel= "stylesheet" type= "text/css"> 

</head> 


<body bgcolor= "#FFFFFF" background= "image/di .gif"> 


<div id= "Layer3" style= "position:absolute; width: 582; height:39; z- index:4; left: 100; 


top: 157™> 


<table width= "582" height= "36" border= "0"> 
<tr> 
< td width="94" height="32" onMouseOver="MM showHideLayers ('gs', '','show')" 
onMouseOut= "MM showHideLayers('gs','', 'hide')"> 
<div align= "center"> 
<font color="#CCCCCC" size="2"> 
< strong> 关于 公司 < /strong> < /font> < /div> < /td> 
< td width= "94" onMouseOver= "MM_showHideLayers ('cp', '', 'show')"onMouseOut= 
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showHideLayers ('cp', '', 'hide')"> 
<div align= "center">< font color="#CCCCCC" size="2"> 
<strong> 关 于 产品 </strong></font></div></td><td width="94"> 
<div align= "center">< font color="#CCCCCC" size="2"> 
< strong onMouseOver ="MM showHideLayers ('ty', '', 'show')" onMouseOut= 
"MM_ showHideLayers('ty','', 'hide')"> 体 育 动 态 
</strong></font></div></td> 
<td width= "94" onMouseOver 


"MM showHideLayers ('fw',"'', "show')" onMouseOut 


showHideLayers ('fw','', 'hide')"> 
<div align= "center"> 
< font color="#CCCCCC" size="2"> 
< strong> <a href="shoes.htm"> 服 务 中 心 <a> 
</strong>< /font>< /div>< /td> 
<td width= "94" onMouseOver= "MM showHideLayers ('sc', '','show')" onMouseOut="MM_ 
showHideLayers('sc','','hide')"> 


<div align= "center"> 


< font color="#CCCCCC" size="2"> 


< strong onMouseOver =" MM showHideLayers (' sc','', "show')" onMouseOut = 
"MM showHideLayers('sc','', 'hide')"> 市 场 信息 
</strong>< /font>< /div>< /td> 
<td width= "94" onMouseOver="MM showHideLayers ('bbs','','show')" onMouseOut="MM_ 
showHideLayers ('bbs','', 'hide')"> 


<div align= "center"> 


< font color="#CCCCCC" size= "2"> 
< strong onMouseOver ="MM showHideLayers (' bbs '，' '，' show ' ) ”onMouseOut = 

"MM showHideLayers('bbs','','hide')"> 好 友 论 坛 

</strong></font>< /div>< /td> 

</tr> 
</table> 
</div> 
<div id="gs" style= "position:absolute; width:74; height:51; z- index:9; left: 118; 

top: 50; visibility: hidden"> 


<table width="72" border="0" onMouseOver="MM showHideLayers ('gs', '', 'show')" 
onMouseOut= "MM showHideLayers('gs','','hide')"> 
<tr><td class= "company"> 
<strong><font color="#CCCCCC" size= "1"> 
<a href="clothe.htm"> 公 司 简介 </a>< /font> 
</strong></td>< /tr> 
<tr><td class= "company"> 
<strong><font color="#CCCCCC" size="1"> 
<a href="shoes.htm"> 公 司 文化 </a></font></strong></td></tr> 
<tr><td class= "company"> 


< strong> < font color="#CCCCCC" size="1"> 
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<a href= "tool.htm"> 招 聘 信 息 < /a> < /font> < /strong> < /td> < /tr> 
< /table> 
</div> 


<div id="ty" style="position:absolute; width:85; height:57; z- index:8; left: 
309; top: 48; visibility: hidden"> 


< table width: 


"85"” border= "0" onMouseOver="MM showHideLayers ('ty','','show')" 


onMouseOut= "MM showHideLayers('ty','','hide')"> 
<tr><td class= "company"> 
< strong> < font color= "# CCccccn" size="1"> 国 内 体育 
< /font>< /strong> < /td> < /tr> 
<tr><td class="company"> 
< strong> < font color= "# CCCCCC" size= "1"> 国际 体育 
< /font>< /strong> < /td> < /tr> 
<tr><td class= "company"> < strong> < font color="#CCCCC0C" size= "1"> 奥运 2008 
< /font>< /strong> < /td> < /tr> 
< /table> 
</div> 


<div id="cp" style="position:absolute; width:74; height:51; z- index:9; left: 216; 
top: 49; visibility: hidden"> 


<table width= "72" border="0" onMouseOver="MM showHideLayers ('cp', '', 'show')" 
onMouseOut= "MM _ showHideLayers('cp','', 'hide')"> 
ompany"> < strong> 
< font color="#CCCCCC" size="1"> 


<tr><td class 


<a href= "clothe.htm"> 
服饰 类 < /a> < /font></strong></td></tr> 
<tr><td class= "company"> < Strong> 
< font color="#CCCCCC" size="1"> 
<a href= "shoes .htm"> 鞋 类 < /a> 
< /font>< /strong>< /td> < /tr> 


<tr><td class= "company"> 


<strong>< font color="#CCCCCC" size= 
<a href= "tool .htm"> 

器 具 类 </a></font></strong></td></tr> 
</table>< /div> 


<div id="bbs" style="position:absolute; width:88; height:38; z- index:10; left: 
6127 top: 50; visibility: hidden"> 


<table width= "88" border= "0" onMouseOver= "MM showHideLayers('bbs','','show')" 


onMouseOut= "MM showHideLayers('bbs','', "hide')"> 
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<tr><td height= "14" class= "company" width= "82"> 
< font color="#CCCCCC" size="1"> 
< strong> 
BBS< /strong> < /font> < /td> < /tr> 
<tr><td class= "company" width= "82"> 
< font color="#CCCCCC" size= "1"> < strong> 
留言 板 < /strong> < /font> < /td> < /tr> 
< /table>< /div> 
<div idq="sc" style= "position:absolute; width:486; height:50; z- index:7; left: 
506; top: 47; visibility: hidden" class= "company"> 
<table width= "96" border="0" onMouseOver="MM showHideLayers ('sc','','show')" 
onMouseOut= "MM showHideLayers('sc','','hide')"> 
<tr><td class= "company" width= "90"> 
<strong> 
< font color="#CCCCCC" size="-2"> 
团购 信息 < /font> 
</strong></td></tr> 
<tr><td class= "company" width= "90"> 
<strong>< font color="#CCCCCC" size="-2"> 
个 人 购买 < /font></strong></td></tr> 
</table>< /div> 
<div id="fw" style= "position:absolute; width:76; height:115; z- index:6; left: 
408; top: 49; visibility: hidden"> 


< table width=" 96" height ="110" border="0" onMouseOver =" MM _ showHideLayers 
('fw','','show')" onMouseOut= "MM showHideLayers('fw', '', "hide')"> 
<tr><td class= "company">< strong> 
" face= "宋体 "> 


< font color= "# FF9900" size= 


<a href= "customer .htm"> 
顾客 登记 < /a> < /font>< /strong> < /td> < /tr> 
<tr><td class= "company"> < strong> 
< font color="#FF9900" size= "1" face= "宋体 "> 
<a href= "prokno .htm"> 
产品 知识 < /a> < /font>< /strong> < /td> < /tr> 
<tr><td class= "company"> 
< strong> < font color="#FF9900" size= "1l" face= "宋体 "> 
<a href= "proask.htm"> 产 品 咨询 < /a> < /font>< /strong> < /td> < /tr> 
<tr><td class= "company"> < strong> 
< font color="#FF9900" size= "1" face= "宋体 "> 
<a href= "fix.htm"> 在 线 报修 < /a> < /font>< /strong> < /td> < /tr> 
<tr><td class= "company"> < strong> 
< font color="#FF9900" size= "1" face= "宋体 "> 
<a href="servicecall.htm"> 服 务 热线 < /a> 
</font></strong></td>< /tr> 
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< /table> 
< /div> < /body>< /html> 


注意 : 这 个 文件 代码 虽然 很 长 但 结构 很 简单 ,只 是 创建 了 几 个 表格 和 其 中 的 标题 。 


然后 加 上 使 用 功能 函数 的 命令 。 仔 细 看 看 即 可 明白 。 
在 本 代码 文件 的 开头 引入 了 dht. js 文件 和 style. css 文件 。 


10.1.4 滚动 的 新 闻 标 题 程序 文件 
1. 程序 功能 说 明 


在 网 站 主页 上 常见 滚动 的 新 闻 标 题 ,滚动 的 显示 一 些 国内 外 的 新 闻 ,或 发 布 网 站 的 通 


知 等 。 滚 动 的 新 闻 标 题 程序 显示 结果 如 图 10. 3 所 示 。 


2 
文件 日 ”编辑 (E) ”查看 (W 收藏 (0) ”工具 (DD 玫 助 (中 | 万 
6 

OO [a mr Vom OO 
地 址 (D) 和 http:jllocalhost:s080jmyjspinews.htm 加 # 到 | HE 


~ 


起 ] http:ifiocalhost:8080jmyispj4-7.htm | | | | | | 对 本 地 Intranet 


图 10.3 新 闻 标 题 程 序 显 示 结 果 


2. news. htm 程序 代码 
下 面 给 出 滚动 新 闻 程 序 news. htm 的 源 代码 ,可 参考 使 用 。 


< Script language= javascript> 

Var index=7 

link= new Array (6) ;text=new Array (6); 

link[0] = 'NBA 最 新 赛事 .htm';link[1] =' 国 际 足球 赛事 .htm'; 
link[2] = ' 国 内 足球 赛事 .htm'; 

link[3] = 'CBR 最 新 赛事 .htm';link[4] = ' 国 际 新 闻 .htm'; 
link[5] = ' 国 内 新 闻 .htm';link[6] = ' 乒 乓 球赛 事 .htm'; 
text[0] = 'NBA 最 新 赛事 ';text[1] =' 国 际 足 球赛 事 '; 
text[2] =' 国 内 足球 赛事 ';text[3] = 'CBA 最 新 赛事 ' 
text[4] = "国际 新 闻 ';text[5] =' 国 内 新 闻 '; 

text[6] = ' 乒 乓 球赛 事 ' 


document .write ("<marquee scrollamount= '1' scrolldelay= '100' direction= 'up' width= '150" 


height= '150'>"); 


for (i=0;i<index;i++){ 
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document .write ("gnbsp;< img src= 'image/1.gif' width= '12' height= "12'><a href="+1ink[i] 
+" target=" blank'>"); 

document .write (text[i] +"</A><br>"); 

} 

document .write ("< /marquee> ") 


</script> 


10.1.5 公用 的 项 部 页 面 程序 文件 
1. 程序 说 明 


网 站 大 部 分 页 面 都 可 以 共用 一 个 顶部 内 容 , 它 包含 网 站 的 标题 标语、 导航 栏 , 本 程序 
的 功能 是 创建 一 个 公用 的 顶部 ,以 便 网 站 的 主页 与 其 他 页 面 使 用 ,可 以 减少 重复 开发 , 统 
一 网 站 风格 。 

由 于 顶部 内 容 需 要 包含 导航 栏 dht. htm 程序 ,所 以 将 其 页 面 设计 为 jsp 格式 ,为 了 使 
页 面 整齐 可 使 用 表格 来 布局 。 在 编程 前 要 准备 好 使 用 的 图 片 。 

公用 的 页 面 项 部 程序 main-1. jsp 显示 结果 如 图 10.4 所 示 。 


页 面 项 部 - Microsoft Internet Explorer 
文件 (E) ”编辑 (E) ”查看 (VW) 收 宕 (8) ”工具 (TD) 帮助 () 


wy 
地 址 (D) 区 http:// 


市 场 信 息 好 友 论 坛 


图 10.4 页 面 项 部 程序 显示 结果 


2. main-1. jsp 程序 代码 
下 面 给 出 页 面 顶部 程序 main-1. jsp 的 源 代码 ,可 参考 使 用 。 


<head><title> 页 面 顶 部 < /title> 
< 1ink rel= stylesheet href= "CSS/style.css" type= "text/css"> 
< /head> 


<table border= " align="center" width="934" bgcolor="# 000000" style= "border — 


collapse: collapse"> 
<tr><td width= "337" height= "15" colspan= "2"><a href= "main.jsp"> 
< img border= "0" src="image/logo 5- 2.gif" width="102" height="33"></a> 
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<p class= "bt"><b> 网 上 体育 用 品 商店 < /b>< /font> < /td> 
<td width= "649" colspan= "6">< font color="#FF0000"><b> 
< img border= "0" src= "image/wel 01.gif" width= "669" height= "145" align= "bottom"> 
</bp></font></td></tr> 
<tr bordercolor= "# 00FF00"> 
<td width= "90"><div align= "center"><b><a href= "main.jsp"> 
< font size= "3" face= "华文 楷 体 "> 返回 主页 < /font></a></b></div>< /td> 
<td width= "90"><div align= "center">< font face= "华文 楷体 " size="3"><b><a href= "map.htm" 
> 网 站 地 图 < /a>< /font></b></font></div>< /ta> 
<td width= "90">< /td> < /tr> 
< /table> 
<div class= "Layer0"” ><%@include file="dht.htm" %></div> 


说 明 : 为 了 将 导航 栏 dht. htm 放 在 合适 位 置 , 可 在 style. css 样式 表 中 添加 以 下 
代码 : 

.Layer0{ 

position:absolute; width:160px; height:115pxy 2z- index:11; left: 155px; top: 175px; 

} 

通过 一 div 过 标记 使 用 Layer0 定义 的 位 置 确定 导航 栏 在 页 面 上 的 位 置 。 导 航 栏 是 通 
过 dht. htm 文件 直接 插入 到 这 个 页 面 中 的 。 


10.1.6 公用 的 底部 页 面 程序 文件 
1. 程序 功能 说 明 


网 站 大 部 分 页 面 都 可 以 共用 一 个 底部 内 容 , 它 应 该 包含 联系 该 网 站 的 方式 、 进 入 其 他 
网 站 的 友情 链接 、 进 入 浏览 整个 网 站 的 网 站 地 图 页 面 、 版 权 说 明 页 面 等 内 容 。 因 为 这 部 分 
可 能 要 添加 到 所 有 页 面 的 下 部 ,所 以 还 应 该 包括 返回 主页 的 方式 。 本 程序 功能 是 可 以 包 
含 在 其 他 页 面 与 主页 中 ,减少 重复 开发 .统一 网 站 布局 。 

页 面 底部 程序 main-2. htm 显示 结果 如 图 10. 5 所 示 。 


E http:/ /localhost:8080/myjsp/main-2.htm - Microsoft Internet Explorer mm) 口 


文件 (E) ”编辑 (E) ”查看 (收藏 (加 工具 (D) 和 帮助 (H) 
OO 加 加 机 万 贡生 区区 


地 址 (0) 是 ] http:yfocalhost:eosolmyjsplmam-2.htm ~ 国 革 到 | 链接“ 


和 本 地 Intranet 


图 10.5 页 面 底 部 程序 显示 结果 
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2. main-2. htm 程序 代码 
下 面 给 出 页 面 底部 程序 main-2. htm 的 源 代码 ,可 参考 使 用 。 


<body bgcolor="# 000000"> 
<hr color= "#0000FF"><div align= "center"> 
<a href= "main.htm"> 返 回 主页 
< img border= "0" src="image/logo 5-2.gif" width= "102" height= "40"> 
</a></div> 
<hr color= "#0000FF"> 
< table width= "392" border= "0" align= "center"> 
<tr bordercolor= "# 00FF00"> 
<td width= "92" height= "15"><div align= "center"> 
<a href="servicecall.htm"> 服 务 热 线 < /a>< /font>< /div> 
</td> 
<td width= "93"> 
<div align= "center"> 
<a href= "freiend.htm"> 友 情 链接 < /a> < /font>< /div> 
</td> 
<td width= "97"><div align= "center"> 
<a href= "map.htm"> 网 站 地 图 < /a>< /font>< /div> 
</td> 
<td width= "92"> 
<div align= "center"> 
<a href="shming.htm"> 版 权 声 明 < /a>< /font>< /div> 
</ta> 
</tr> 
</table> 
<div align= "center">< /div> 
<div align= "center">< font color="#FF0000"> 如果 有 问题 请 联系 < /font> 
<a href= "mailto:zhc@ sinc.com"> 网 站 制 作 项 目 组 < /a> 
< /div> 


10.1.7 公用 的 数据 库 连 接 程序 文件 
1. 程序 功能 说 明 


要 实现 动态 功能 ,经 常 要 用 到 数据 库 中 的 数据 。 程 序 jdbc-roy. jsp 的 功能 就 是 实现 
到 连接 数据 库 roy 的 数据 源 roy, 在 以 后 了 解 其 他 数据 库 时 只 要 修改 数据 源 名 称 即 可 。 


2. jdbe-roy. jsp 程序 代码 
下 面 给 出 页 面 底部 程序 jdbc-roy. jsp 的 源 代 码 ,可 参考 使 用 。 


<$%$Q@page import= "java.sql.* "$> 
去 和 
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Class.forName ("sun.jdbc.odbc.JdbcOodbcDriver"); 

Connection c=DriverManager .getConnection ("jdbc:odbc:roy"); 

Statement s= C- CreateStatement (ResultSet. TYPE SCROLL SENSITIVE, ResultSet. CONCUR _ 
UPDATABLE); 

PreparedStatement ps=null; 

名 > 


10.1.8 公用 的 网 上 搜索 引擎 
1. 程序 功能 说 明 


在 网 上 有 许多 网 站 都 有 搜索 引擎 的 功能 。 本 程序 具有 使 用 百度 网 站 搜索 引擎 进行 搜 
索 的 功能 。 


2. 程序 代码 
使 用 其 他 网 站 搜索 引擎 的 程序 文件 bds. html, 源 代码 如 下 : 


< form name= query action=http://wwwl.baidu.corV/baidu method= get target=_blank> 
< input name= tn type=hidden value=baidu> 
<table width= "211" border= "0"> 
Se 
<td colspan= "2" class="yonghu">< font color="#CCCCCC"> 百 度 搜 索 < /font> 
< img src="image/baidulogo.gif" width= "80" height= "29">< /td> 
</tr> 
<tr> 
<td width= "132" height= "23"> < input name= "word" type= "text" size= "18"> 
< /td> 
< td width= "63"> < input type= "submit" name= "Submit3" value= "search"> < /td> 
< /tr> 
< /table> 


EE:\Apache Software FoundationvTomcat 5.0\we.-. [CE] 区 | 
文件 @) 编辑 区 ) 查看 WW) 收藏 和 ) 工具 (TD) 帮助 00 [3 


四 铺 -四 - 国 国 押 甩 时 交 wx 革 i 


地 址 名) 


图 10.6 使 用 搜索 引擎 的 页 面 
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bds. html 文件 可 以 座 入 到 其 他 页 面 中 ,提供 一 个 使 用 百度 搜索 引擎 的 接口 。 


10.2 制作 首页 


本 节 主 要 介绍 制作 首页 的 方法 。 

根据 首页 的 详细 设计 ,该 页 主要 有 三 部 分 内 容 , 网 站 标题 、flash 动画 、 进 入 主页 的 图 
片 链接 。 

制作 首页 分 为 如 下 2 个 环节 。 
10.2.1 准备 首页 使 用 的 素材 

在 制作 首页 前 要 准备 好 该 页 使 用 的 flash 动画 文件 ,图 片 文件 素材 ,要 精心 制作 一 个 
logo 图 片 。 然 后 使 用 编辑 器 编写 首页 文件 。 


10.2.2 编写 index. htm 首页 程序 文件 


1. 程序 功能 说 明 

该 页 面 程序 功能 是 通过 简洁 、 漂 亮 、 突 出 的 形式 显示 网 站 主题 ,吸引 住 浏览 用 户 ,提供 
进入 网 站 主页 的 接口 。 

由 于 该 页 面 没 有 动态 功能 要 求 , 所 以 该 页 面 使 用 html 语言 来 编写 ,为 了 使 页 面 整齐 
可 使 用 表格 来 布局 。 

首页 在 浏览 器 中 的 显示 结果 如 图 10.7 所 示 。 


Internet Explorer 


og0/ jspyayjsp/index htm 


文件 四” 问 丑 E) 查看， 由 藏 天 办) 工具 I) 帮助 人 | haol23R9Z 家 尼 Windows 
回 间 页 僵 - *- 轩 页 夯 @) - 


2. index. htm 页 面 程序 代码 
下 面 给 出 首页 程序 文件 index. htm 的 源 代 码 , 可 参考 使 用 。 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset= gb2312"> 

<title> 首 页 < /title> 

<link href="css/style.css" rel= "stylesheet" type= "text/css"> 

< /head> 

<body style= "background- color: #000000; background- image: url('')"> 

<p>< img src="image/logo 5-2.gif" width="102" height= "40" border="0">< /p> 

< table width= "990" border= "0" cellpadding= "0" cellspacing= "0" bgcolor= "# 000000" style= 
"border- collapse: collapse" height= "518"> 

<tr> 

<td width= "93" rowspan= "2" valign= "top" height="518"> 

<p class= "bt"><b> 网 上 体育 用 品 商店 < /b>< /p> 

< /td> 

<td width= "718" height= "1"> < /td> 

<td width= "48" height= "1"> < /td> 

<td width= "101" height: 


wd> 
< /Er> 
< 
<td valign= "top" width= "718" height= "517"> < div align= "right"> 
< embed src="image/lining. swf" quality="high" type= "application/x- shockwave- flash" 
width= "724" height= "429"> 
< /embed><a href= "main.jsp"> 


< img src="image/skipfinal .gif" width="101" height= "25" border= ></a> 
< img src="image/logo 5-2.gif" width="102" height= "40" border="0"> 
<a href= "main.jsp"> 
< font size= "6"> 进 入 主页 </font></a></div>< /td> 
<td height= "517" width= "149" colspan= "2"> < /td> 
</tr> 
</table> 


</body>< /html> 


10.3 ”制作 会 员 登 录 和 注册 动态 功能 模块 


优惠 


现在 大 多 数 的 网 站 都 实行 会 员 制 ,以 区 别 一 般 浏 览 者 与 会 员 , 会 员 用 户 将 提供 更 多 的 
惠 政 策 。 实 现 会 员 制 需要 提供 会 员 注册 和 登录 的 功能 ,通过 注册 将 用 户 信息 保存 在 服 


务 器 的 数据 库 中 ,标记 其 为 会 员 。 注 册 过 的 老 会 员 可 以 登录 到 该 网 站 ,将 享受 网 站 提供 的 
更 好 的 服务 。 
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本 节 的 内 容 主要 介绍 制作 创建 会 员 登 录 和 注册 动态 功能 模块 的 方法 ,主要 介绍 用 来 
实现 用 户 注册 与 登录 、 实 现 会 员 制 的 5 个 程序 文件 ,各 个 应 用 程序 内 容 如 下 所 述 


10.3.1 会 员 登 录 和 注册 入 口 程序 文件 
程序 功能 说 明 


login. htm 页 面 程序 的 功能 是 提供 一 个 会 员 登 录 和 注册 入 口 , 如 果 是 注册 过 的 老 会 
员 ,可 以 在 这 里 输入 会 员 名 和 密码 , 单 击 “ 登 录 ” 按 钮 将 填写 的 会 员 数 据 提交 给 登录 处 理 程 
序 login. jsp 判别 其 会 员 身份 。 如 果 是 新 用 户 要 注册 , 单 击 * 新 会 员 注 册 入 口 ? 链 接 将 进入 

登录 页 面 register. htm。 甚 页面 如 图 10. 8 所 示 。 


会 员 登 陆 入 口 - Microsoft Internet Explorer 


文件 (日 ”编辑 (E) ”查看 (WD 收 送 (A) 工具 (D 帮助 ( 


人 @ 捉 - 日 -由 辐 罗 部 业 


地 址 (D) 起 http://localhost:8080jmyjspfiogin.htm 


本 地 Intranet 


图 10.8 会 员 登 录 和 注册 入 口 页 面 


2. login. htm 程序 代码 
下 面 给 出 登录 和 注册 入 口 页 面 程序 文件 login. htm 的 源 代码 ,可 参考 使 用 。 


<title> 会 员 登 录入 口 < /title> 
<body background= "image/di .gif" 1ink= "# CCCCCC" vlink= "#666666"> 
<table width= "211" border= "0" bgcolor= "# 000000"> 
<tr><td height="22" colspan= "2" valign= "top" class= "yonghu" width= "205"> 
<p align= "center">< font color= "# CCCCCC"> 会 员 登 录 < /font>< /td> < /tr> 
<tr><td height= "22" colspan= "2" valign= "top" width= "205"> 

< form name= "forml" method= "post" action= "login.jsp"> 
<span class= "yonghu"> < font color="#CCCCCC"> 会 员 名 < /font>< /span> 
< input name= "username" type= "text" id= "username" size= "15"> < /td> < /tr> 
<tr><td height= "20" colspan= "2" valign= "top" width= "205"> 
< span class= "yonghu">< font color="#CCCCCC"> 密 snbsp; 码 < /font>< /span> 
< input name= "password" type= "password" id= "password" size= "15"> 
</td></tr> 
<tr><td width="53" height= "20"><div align= "center"> 
< input type= "submit" name= "Submit" value= "登录 "> 
< /form> 


。 295uh'l 


<V/div> < /td> 

<td width="148" class= "yonghu"> 

<a href= "register.htm" > 新 会 员 注 册 入 口 </a></td></tr> 
< /table> 


10.3.2 用 户 登 录 数 据 处 理应 用 程序 文件 
1. 程序 功能 说 明 


在 登录 和 注册 入 口 页 面 login. htm 中 用 户 输入 会 员 名 yhm 与 口令 mm 后, 单 击 “ 登 
录 ” 按 钮 后 ,会 员 输 入 的 数据 将 提交 给 login. jsp 处 理 程序 ， ts 
传递 到 数据 库 , 按 输入 的 会 员 名 查找 是 否 有 该 会 员 名 及 口令 ,如 果 口 令 相 符 ,将 打开 一 个 
欢迎 会 员 进 入 的 页 面 user. jsp。 
login. jsp 处 理 程序 没有 页 面 只 是 提供 数据 处 理 功 能 。 


2. login. jsp 程序 代码 
下 面 给 出 会 员 用 户 登 录 数 据 处 理应 用 程序 Login. jsp 的 源 代 码 ,可 参考 使 用 。 


<$%@page contentType= "text/html; charset=gb2312"%> 
<%@page import= "java.sql.* "和 > 

<%@include file="jdbc- roy.jsp" %> 

<html> 

<body> 

<b> 在 客户 端 浏览 器 向 数据 库 添 加 数据 < /b><p> 


<%$ 
// 得 到 从 浏览 器 传 来 的 用 户 名 和 密码 的 值 
String yhm= request .getParameter ("yhm"); 
String mm= request .getParameter ("mm"); 
// 在 数据 库 中 按 输入 的 会 员 名 查找 口令 
String sql2= "SELECT mm FROM userpwd WHERE yhm= '"+ yhmt "'"; 
ResultSet rs=s.executeQuery (sql2); 
// 判 断口 令 是 否 正确 
String pass=nul17 
while (rs.next ()){ pass=rs.getstring(1); } 
if(mm.equals (pass)){ 
session.setAttribute ("username", yhm); 
多 > 
<jsp:forward page= "user.jsp"/> 
< 
}elsef{ 
out.print ("登录 失败 ! 用 户 名 不 存在 或 密码 不 正确 。 可 返回 主页 重新 登录 或 先进 行 注册 再 登 
录 。<a href=main.jsp> 返 回 主页 < /a>"); 
} 
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Ts-Closet)7 
ps.close(); 
c.close(); 
> 

< /body> 
</htm> 


10.3.3 欢迎 会 员 登 录 成 功 的 页 面 文件 
1. 程序 功能 说 明 


欢迎 会 员 登 录 的 页 面 user. jsp 给 出 会 员 成 功 登 录 的 信息 ,提供 一 些 会 员 可 以 进入 的 
链接 。 


2. user. jsp 页 面 程序 代码 
下 面 给 出 会 员 登 录 页 面 程序 文件 user. jsp 的 源 代码 ,可 参考 使 用 。 


<head> 
<title> 会 员 登 录 页 面 < /title> 
<%Q@page contentType= "text/html;charset=IS08859 1" %> 
<$% page import="java.util.* "%> 
< 和 多 
// 保 证 此 页 面 一 定 要 通过 用 户 登 录 才 能 进入 
if(session.getAttribute ("username")==null1){ 
response.sendRedirect ("login.htm"); 
else 
{ 
String username= (String) session.getAttribute ("username"); 
> 


<link href="css/style.css" rel= "stylesheet" type= "text/css"> 
< /head> 
<body bgcolor= "# FFFFFF" background= "image/di .gif" > 
<$%@include file="main-1.jsp" 外 > 
< 
Date current=new Date () > 
int time= current .getHours () 7 
> 
<div class="Layer2" > 

<p class= "customer"><%=username 和 > 

<%sif (time< 三 12&&time> 三 6) 

out.printin(" 上 午 好 !1"); 
else if (time<=18) 
out.printin(" 下 午 好 !"); 
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else out.printlin(" 晚 上 好 !"); 
多 > 
</p> 
</div> 
<div class="Layer3"> 
<p class= "customer"> 尊 敬 的 用 户 , 您 已 经 登录 成 功 ! 这 里 是 会 员 天 地 ,你 可 以 在 这 里 享受 特殊 的 
服务 祝 你 在 这 里 开心 !< /p> 
<P class= "customer" align= "center"> 
<a href= "chat/index.jsp"> 进 入 聊天 室 < /a> < /font>< /p> 
<p align= "center"> <a href=- "1yb/index-jsp"> 进 入 留言 板 < /a>< /p> 


center"> <a href= "tp/showquestion.jsp"> 体 育 明 星 投 票 </a>< /p> 


<p align: 


<p align= "center" class= "customer"><u><a href= "main.jsp"> 返 回 主页 </a></u>< /p> 
</div> 

<$}$> 

< /body> 

</htm> 


其 页 面 如 图 10.9 所 示 。 


图 10.9 会 员 注册 登记 页 面 


10.3.4 会 员 注册 页 面 程序 文件 


。 程序 功能 说 明 


本 页 面 是 在 “登录 和 注册 入 口 ” 单 击 “ 新 会 员 注 册 入 口 ” 超 链接 后 打开 的 页 面 ,本 页 面 
的 功能 是 输入 新 会 员 的 信息 ,并 按 “ 提 交 ” 按 钮 将 登记 内 容 提 交 给 JSP 程序 register. jsp 进 
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[sy 


收 毫 (和 ) ”工具 (D 帮助 (中 


图 10.10 会 员 注 册 登 记 页 面 


2.register. htm 程序 代码 
下 面 给 出 会 员 注 册 登 记 页 面 程序 文件 register. htm 的 源 代码 ,可 参考 使 用 。 
<head> 


<meta http- equiv= "Content- TYPe" content= "text/html; charset= gb2312"> 
主 册 < /title> 


<title> 会 兵 
< 1ink href= "css/style.css" rel= "stylesheet" type= "text/css"> 
< /head> 
<body background= "image/di .gif" lin "# CCCCCC™ vlink= "# 666666"> 
bt" align= "center"> 会 员 注册 < /p> 
<p class= "page"> 欢 迎 您 来 到 我 们 的 网 站 ! 在 此 4 
我 公司 的 会 员 , 会 定期 收 到 我 们 给 你 发 去 的 产品 资 
料 的 填写 你 就 可 以 成 为 我 的 会 员 了 , 快 快 行动 吧 !< /p> 


< form action= "register.jsp" method= "post" name= "forml" class= "page"> 


<P clas: 


可 以 通过 免费 注册 成 为 我 公司 的 会 员 , 作 为 
让 你 更 快 地 了 解 我 们 的 信息 。 通 过 以 下 资 


<p class= "page" align= "left"> 会 员 账 号 : 
< input name="yhm" type= "text" id= "yhm" size= "15"> 
(6 位 以 上 的 数字 或 英文 字母 , 必 填 )< /p> 
<p class= "page" align= "left"> 密 gnbsp;&nbsp; 码 ( 必 填 ) : 
< input name= "mm" type= "password" id= "mm" size="15"> 确 认 密 码 : 


< input name= "password2" type= "password" idq= "password2" size= "15"> < /p> 
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<p class= "page" align= "left"> 姓 gnbsp; gnbsp; &nbsp; &nbsp; 和 名 : 
< input name= "name" type= "text" id= "name" size="15"> 联 系 电话 : 
<input name= "call™ type= "text" idq= "cal1"” size="15"> 
< /p> 
<p class= "page" align= "left"> 通 信 地 址 : 
< input name= "address" type= "text" id= "address" size="50"> 
</p> 
<p class= "page" align= "left">E-mail ( 必 填 ) :&nbsp; gnbsp; 
<input name= "email" type= "text" id="email" size="50"> 
</p> 
<palign= "center" class= "page"> 
< input type= "submit" name= "Submit" value= "提交 "> 
&nNnbsp; ENnbsp; Enbsp; ENnbsp; 
<input type= "reset" name= "Submit2" value= " 重 置 "> 
</p> 
< /form> 
< /body> 
</html> 


10.3.5 注册 数据 保存 处 理 程序 文件 
1. 程序 功能 说 明 


在 会 员 注 册 登 记 页 面 register. htm 中 登记 的 数据 信息 按 “ 提 交 ” 按 钮 后 交 给 register. 
jsp 处 理 程 序 ,该 程序 的 功能 是 将 登记 数据 传递 到 数据 库 中 。 保 存 数据 到 数据 库 后 即 注册 
成 功 , 将 打开 一 个 成 功 的 页 面 succ. htm。 

register. jsp 处 理 程序 没有 页 面 只 是 提供 数据 处 理 功能 。 


2. register. jsp 程序 代码 
下 面 给 出 注册 数据 保存 处 理 程序 文件 register. jsp 的 源 代码 ,可 参考 使 用 。 


<$% page contentType= "text/html; charset= gb2312"g% > 
<%@page import="java.sql.* "%> 
<%@include file="jdbc- roy.jsp" %> 


<html> 
<body> 
<b> 在 客户 端 浏览 器 向 数据 库 添加 数据 < /b><p> 


张 痪 

// 得 到 从 浏览 器 传 来 的 用 户 名 和 密码 的 值 
String yhm= request .getParameter ("yhm"); 
String mm= request .getParameter ("mm"); 


String namel= request.getParameter ("name"); 


maeo 。 


// 姓 名 为 中 文 的 处 理 

String name=new String (namel .getBytes ("ISO- 8859- 1"),"GBK"); 
String call=request.getParameter ("call"); 

String addressl= request .getParameter ("address"); 

String address=new String (address]l.getBytes ("ISO- 8859- 1"),"GBK"); 


String email= request.getParameter ("email"); 


String sqll="insert into userpwd (yhm,mm) values ("+yhmt "','"+mmt" 


s.executeUpdate (sgql1); 


String sql2="insert into register (yhm,name,call,address,email) values ('"+ yhmt "', '"+name 
calli "maddresst ,memailr ") 


s.executeUpdate (sql2) 7 


名 > 

<jsp:forward page="succ.htm" /> 
< 

ps.close(); 

s.close(); 

c.close(); 

> 

< /body> 

</htm> 


注意 : 通过 register. jsp 处 理 程序 可 将 输入 的 会 员 信 息 数 据 添 加 到 数据 库 roy 中 。 
如 果 注 册 成 功 , 可 以 看 到 如 图 10. 11 所 示 的 页 面 (succ. htm, 该 页 面 只 有 一 句 话 和 用 
户 返 回 主页 的 链接 ,这 里 就 不 介绍 了 )。 


会 员 广 册 - Microsoft Internet Explorer 
文件 (E) ”编辑 (E) ”查看 (YW) 收 戎 (6) ”工具 (DD 帮助 (H) 


体育 动态 服务 中 心 市 场 信息 李宁 论坛 


恭喜 你 成 为 我 们 的 新 会 


图 10.11 会 员 注 册 成 功 页 面 
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在 看 程序 时 注意 ,有 的 程序 语句 被 分 为 了 两 行 ,这 是 排版 造成 的 ,在 编写 程序 时 不 能 
将 一 个 程序 语句 写 为 两 行 。 例 如 下 面 两 行为 一 个 程序 语句 : 


String sql2="insert into register (yhm,name, call,address,email) values('"+ yhmt "', '"+ name 


ttcallt"', "raddresst "', "+emailt "')"; 


10.4 整合 主页 


本 节 主 要 介绍 制作 模块 化 主页 的 方法 。 


- 面 介绍 的 多 个 页 面 程 序 文件 整合 构成 的 ,包括 共用 的 程序 、 动 
等 ,主页 程序 文件 只 是 通过 JSP 语言 将 这 些 程序 文件 组 合 在 一 起 ， 
斋 集 息 和 在 主页 ed 主页 页 面 如 图 10. 12 所 示 。 


Windows Internet Explorer 


国 http://localhest:80801jsp/myjspymain jsp 


文件 下) ”编辑 下 ) 查看 V) 收藏 严 由 ) 工具 (I) 帮助 0D 


司 导航 条 
前 当前 安全 设置 会 使 计算 机 有 风 院 。 请 单 击 这 里 更 改 安全 设置 


图 10.12 “网 上 体育 用 品 商店 ”网 站 主页 页 面 


10.4.2 主页 程序 文件 main. jsp 的 代码 
主页 程序 文件 main. jsp 的 源 代码 如 下 所 示 ,可 参考 使 用 。 


nan2 * 


<$ page contentType= "text/html;charset= IS08859 1" $> 
<link href="css/style.css" rel= "stylesheet" type= "text/css"> 
<html> 
<body> 
<%@include file="main-1.jsp" %$> 
<$@include file="login.htm" %> 
<h2><a href="tp/admin/login.jsp" class="zhuye"> 管 理 员 入 口 < /a></h2> 
<body bgcolor= "# FFFFFF" background= "image/di .gif" > 
<div class="layerl"><%@include file="news.htm" %>< /div> 
<div class= "layer2"> 
<%@include file="jsq2.jsp" %> 
</div> 
<div class="layer4">< img src="image/xyt2.gif" width= "400" height= "260"> 
</div> 
<div class="layer5"><%@include file="main- 2.htm" %></div> 
< /body> 
< /html> 


注意 : 制作 主页 的 任务 还 没有 全 部 完成 ,其 中 "管理 员 入 口 ? 是 给 进行 市 场 调查 动态 
模块 留 下 的 接口 ,滚动 新 闻 标 题 对 应 的 静态 内 容 页 面 也 没有 完成 ,各 个 栏目 页 面 没 有 完 
成 ,这 些 都 要 留 到 下 个 阶段 来 完成 。 

主页 程序 看 起 来 很 简明 。 因 为 它 是 由 其 他 编写 好 的 程序 文件 组 合 构成 的 ,通过 使 用 
多 个 二 div class 一 "Layer5" 过 标记 确定 每 个 模块 或 其 他 图 片 、 接 口 在 页 面 上 显示 的 位 置 。 
这 样 编 写 程序 ,可 提高 模块 化 ,而 且 便 于 维护 和 修改 ,并 有 利于 代码 重用 。 这 样 的 程序 结 
构 称 为 模块 化 的 程序 结构 。 


10.5 制作 栏目 页 面 及 相关 二 级 页 面 


本 节 的 内 容 主要 介绍 制作 网 站 各 个 栏目 一 级 页 面 与 相关 二 级 页 面 的 注意 问题 。 
10.5.1 制作 栏目 一 级 页 面 


栏目 一 级 页 面 由 多 个 页 面 组 成 ,具体 个 数 由 栏目 多 少 来 确定 。 栏 目 页 面 要 包括 : 栏 
目 页 面 导 航 栏 、 菜 单 . 栏 目 主 要 内 容 介 绍 、 到 二 级 页 面 的 链接 .返回 主页 的 链接 、 到 其 他 栏 
目 页 面 的 链接 等 。 

图 10. 13 为 “关于 公司 ”栏目 的 一 级 页 面 , 图 10. 14 为 “关于 产品 ?栏目 的 一 级 页 面 , 可 
参考 开发 主页 的 步骤 开发 各 个 栏目 的 一 级 页 面 。 
10.5.2 制作 相关 二 级 页 面 

相关 二 级 页 面包 括 两 部 分 内 容 : 主页 相关 的 二 级 页 面 与 栏目 页 面相 关 的 二 级 页 面 。 
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a i Sy 
运 开 


个 产品 系列 的 专业 化 
4 四 和 :产品 结构 日 


在 产品 开发 方面 ， i 
发 中 心 ， Ee 开发 管理 机 制 ， 并 聘请 了 国内 外 一 流 的 设计 
大 、 版 师 、 以 及 专业 的 开发 营 理 人 才 ， ee 
a 


设 上 ,公司 可 以 讽 是 业 转 章 团 。 在 北京 
[lk 
在 同类 产品 中 市 场 占有 率 位 居 


图 10.13 “关于 公司 ”栏目 一 级 页 面 


图 10.14 “关于 产品 ”栏目 一 级 页 面 


1. 主页 相关 的 二 级 页 面 


要 由 专人 负责 主页 的 制作 ,包括 实现 与 主页 相关 的 二 级 页 面 。 例 如 “网 上 体育 用 品 商 
店 ” 主 页 中 滚动 新 闻 标 题 超 链接 对 应 各 个 静态 页 面 , 只 要 给 出 最 新 的 文字 体育 信息 与 
二 

可 以 使 用 数据 库 来 存放 新 闻 内 容 。 


2. 栏目 页 面相 关 的 二 级 页 面 


二 级 页 面 主 要 包括 : 显示 主页 菜单 中 指出 的 文字 内 容 介 绍 .产品 展示 (图 片 ) .与 用 户 
进行 交互 、 保 存 用 户 输 入 的 数据 等 .返回 栏目 页 面 的 超 链接 等 。 本 任务 功能 简单 ,但 工作 
量 大 。 如 果 前 期 素材 收集 工作 准备 充分 ,将 很 容易 完成 。 

图 10. 15 为 “关于 产品 ”栏目 一 级 页 面 中 “器 材 配件 "菜单 的 二 级 页 面 。 


mao4 。 


GBX4345-5) 。 2004 1 GBx4344-3) 。 2004. 上 GBs342-3) 2004.1 GBX4341-1) 2004 1 
GBX4340-2) 2004. GBx4339-3) 2004 {38X4336-3) -2004.1 (3BX4335-3) 2004.1 
GBX4332-4) 2004. 1 GBx4331-1) 2004.1 GBxs320-6) 2004 GBX4317-2) 。 2004.1 


5 as < 上 -页 下 -页 > 


图 10. 15 “关于 产品 ”一 级 页 面 的 二 级 页 面 


10.6 创建 用 户 留言 动态 功能 模块 


用 户 留 言 系 统 是 一 般 网 站 都 要 具备 的 , 它 是 了 解 用 户 意见 的 一 个 主要 窗口 。 

本 节 的 内 容 主 要 介绍 如 何 编写 ee 留言 系统 的 应 用 程序 ,通过 创建 用 户 留言 系 
统 , 可 以 了 解 如 何 保存 用 户 的 留言 信息 ,如 何 显示 留言 信息 ,如 何在 页 面 的 表格 中 显示 图 
标 图 片 , 如 何 按 留言 的 时 间 对 信息 排序 显示 ， 如 何在 页 面 中 显示 IP 地 址 、E-mail 地 址 、 
QQ 号 码 等 。 


10.6.1 共用 的 CSS 程序 文件 

1. 程序 功能 说 明 

lyb. css 样式 表 程序 文件 的 功能 是 统一 确定 留言 相关 页 面 的 背景 .主题 色彩 文字 属 
性 、 链 接 、 位 置 .颜色 等 内 容 。 

2. 程序 代码 

lyb. css 的 源 代 码 如 下 所 示 ,可 参考 使 用 。 


-bg { 
background- color: #000000; 


list- style- type: square; 
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} 
body {background— color:#eff3ff;font- size: 12px; 
scrollbar- 3dlight- color: #4f81lca; 
scrollbar— arrow— color: #f£fffff; 
scrollbar- track-— color: #4f81lca; 
scrollbar- base— color: #4f8lca; 
} 
td { 
font— size: 9pt; line— height: 135%; font— family: "宋体 "， “verdana"; " arial", " 
helvetica", "sans- serif™ 
' 
af 
font - size: 9pt; line- height: 135%; font- family: "宋体 "，"verdana"，"arial"，" 
helvetica", "sans- serifE" 
} 
input { 
background- color: # fffff; border- bottom: #4f8lca lpx solid; border- left: # 4f81ca 
lpx solid; border- right: # 4f8lca lpx solid; border- top: # 4f8lca lpx solid; font- size: 
Spt;color:#000080 
} 
select { 
font- size: pt; font- family: 呆 体 "， "verdana", "arial", "helvetica", "sans- serif"™" 
} 
textarea { 
font- size: Pt; font- family: “有 人体 忆 "verdana"，"arial"，"helvetica"，"sans 一 Serif" 
} 
option { 


font- size: pt; font- family: "宋体 "， "verdana", "arial", "helvetica", "sans-— serif" 


a:link { 
color: #003303; text- decoration: none 
} 
a:hover { 
Color: #0066ff; text- decoration: underline 
} 
a:visited { 


text— decoration: none; color: #003303 


10.6.2 共用 的 JavaBean 程序 文件 
1. JavaBean 程序 功能 


留言 系统 将 使 用 两 个 JavaBean 应 用 程序 : Bean. java 与 PageCt. java。 
jao6 . 


Bean. java 程序 的 功能 之 一 是 通过 ex_chinese(string str) 方 法 定义 给 定 的 中 文 输出 
格式 为 gb2312( 简 体 中 文 ) ,功能 之 二 是 通过 gettime() 方 法 得 到 当前 时 间 ,其 中 使 用 了 得 
到 当前 时 间 的 java. util. Date() 类 。 

PageCt. java 程序 的 功能 是 定义 JSP 页 面 一 页 显示 10 条 记录 、 得 到 当前 页 数 、 下 一 
页 、 上 一 页 、 总 记录 数 、 总 页 数 等 方法 。 


2. JavaBean 源 代码 
bean. java 源 程序 代码 如 下 所 示 , 可 参考 使 用 。 


package lyb; 
import java.text.*; 
public class bean { 


public bean() { } 


Public String ex chinese (String str){ 

if(str==null){ str ="";} 

else{ 
try { 

str=new String (str.getBytes ("iso- 8859- 1"), "gb2312") ; 

} 
catch (Exception ex) { } 

3} 


return str; 


public String gettime() { 
String strCurrentDate=""; 
try { 
java.util .Date date=new java.util .Date(); 
SimpleDateFormat strDate=new SimpleDateFormat ("yyyy— MM- dd HH:mm:ss"); 
strCurrentDate= strDate.format (date); 
} 
catch (Exception ex) { } 


return strCurrentDate ; 


} 
PageCt. java 源 程序 代码 如 下 所 示 ,可 参考 使 用 。 


package lyb; 

public class PageCt{ 
private long 1 start; // 开 始 记 录 
private long 1 end; // 结 束 记录 
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Private long 1 curpage; // 当 前 页 数 


private long 1 totalnum; // 总 记录 数 
private int int num=10; // 每 页 10 条 
private long 1 totalpage; // 总 的 页 数 


Public void Init (long currentpage,long totalnum) { 
1 curpage= currentpage; 


1 totalnum= totalnum; 


if (currentpage>=0) { 
if (currentpage>= (long)Math.ceil ((double)1 totalnumy (double)int num)) 
1 curpage= (long)Math.floor ( (double)1 totalnum/ (double)int num); 
else 
1_ curpage= currentpage; 
} 
else{ 1 curpage=0; } 
1 start=1 curpage * int num; 
1 end =1 start +int num; 
if (1 end >1 totalnum) 
1 end=1 totalnum; 


1 totalpage= (long)Math.ceil ( (double) 1 totalnum/ (double)int num); 


public long getCurpage() {return 1 curpage;} 
public long getPrepage() { 
if (1 curpage-1>=0) {return 1 curpage- 1;} 
else {return 0;} 
} 
Public long getNextpage() { 
if (1 curpage+1<=1 totalpage) {return 1 curpage+1;} 
else{return 1 totalpage;} 
} 
public long getTotalnum() {return 1 totalnum;} 
public long getTotalpage() {return 1 totalpage;} 
Public long getstart() {return 1] start;} 
public long getEnd() {return 1 end; } 
} 


注意 : 

(1) 要 将 JavaBean 文件 编译 为 class 字 节 码 文 件 。 

(2) 要 注意 存放 JavaBean 的 位 置 ,一般 放 在 Tomcat 的 根 目 录 /ROOT 下 ,例如 ,可 将 
bean. class、PageCt. class 文件 存放 在 C:/Tomcat/webapps/ROOT/WEB-INF/classes/ 
lyb/ 文 件 夹 中 。 如 果 已 经 设置 好 虚拟 目录 ,可 存放 在 虚拟 目录 下 的 WEB-INF/classes/ 路 
径 下 ,例如 ,C:/wzkf/WEB-INF/classes/lyb 文件 夹 中 ,要 注意 classes/ 下 子 文件 夹 的 名 


man8 。 


字 要 与 程序 中 定义 的 类 包 名 字 相同 。 
10.6.3 共用 的 JavaScript 功能 程序 文件 
1. week. js 程序 功能 


week.js 程序 的 功能 是 可 以 将 代码 插入 到 任意 页 面 文件 中 ,在 页 面 上 显示 当前 年 、 
月 .日 .星期 几 的 数据 信息 。 


2. week. js 程序 代码 
week. js 程序 的 源 代码 如 下 所 示 ,可 参考 使 用 。 


Var day= ""; 


Var month=""; 


Var ampm= ""; 

Var ampmhour=""; 

Var myweekday= ""; 

Var year=""; 

mydate=new Date (); 
myweekday=mydate .getDay (); 
mymonth=mydate.getMonth ()+17 
myday=mydate .getDate (); 
myyear=mydate .getYear () 7 
year= (myyear> 200)? myyear:1900+myyear; 
if (myweekday == 0) 
weekday=" 星期 天 "; 

else if (myweekday ==1) 
weekday=" 星期 一 "; 

else if (myweekday == 2) 
weekday=" 星期 二 "; 

else if (myweekday == 3) 
weekday=" 星期 三 "; 

else if (myweekday == 4) 
weekday=" 星期 四 "7 

else if (myweekday == 5) 
weekday=" 星期 五 "; 

else if (myweekday == 6) 
weekday=" 星期 六 "; 


document .write (year+ "- "+mymonth+ "- "+myday+ weekday); 


10.6.4 questionnaire 数据 库 与 lyb 表 


1. lyb 表 的 作用 
lyb 表 的 作用 是 存放 用 户 的 留言 。 
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2. lyb 的 结构 


lyb 可 以 单独 创建 一 个 数据 库 ,为 了 简化 ,可 将 lyb 表 存 放 在 已 经 创建 的 Access 数据 
库 questionnaire 中 。1lyb 的 物理 结构 如 图 10. 16 所 示 。 


addTime ” 国 注意 不 能 使 用 time 作 为 字段 名 称 ， 与 javs 冲 突 


放 汪 | 备注 | | 

ex 文本 | 一 代 ] 

face 文本 图 | 
字段 属性 站 | 


so 


数据 类 型 决定 用 户 所 能 
保存 在 该 字段 中 值 的 种 

类 。 按 Fl 键 可 查看 有 
关 数 据 类 型 的 帮助 . 


Unicode 压缩 是 
输入 法 模式 局 
IME 语句 模式 ( 羽 日 文 ) | 无 转化 
智能 标记 


图 10.16 lyb 的 物理 结构 


10.6.5 连接 数据 库 的 JSP 程序 文件 
1. opendata. jsp 程序 功能 说 明 


opendata. jsp 程序 的 功能 是 连接 questionnaire 数据 库 文 件 , 为 JSP 文件 使 用 数据 库 
中 的 数据 铺 平 道路 。 


2. opendata. jsp 程序 代码 


连接 数据 库 程 序 文件 opendata. jsp 的 源 代码 如 下 所 示 ,可 参考 使 用 。 


<%Q@page import="java.sql.* "$> 

< 

Class .forName ("sun.jdbc .odbc .JdbcOodbcDriver"); 
String url= "jdbc:odbc:jsp"; 

Connection c=DriverManager .getConnection (url); 
Statement s= (Statement)c.createStatement (); 
PreparedStatement ps; 

ResultSet rs; 

String sql; 

$$> 
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10.6.6 用 户 留言 模块 主页 
1. lyb-index. jsp 页 面 程序 功能 


用 户 留 言 主页 是 进入 用 户 留言 模块 看 到 的 页 面 ,主要 用 来 显示 用 户 的 留言 。 留 言 页 
面 按 留言 的 时 间 降 序 显示 留言 的 内 容 ,在 页 面 下 方 可 以 看 到 留言 的 总 页 数 、 当 前 页 数 , 输 
入 页 数 可 以 查找 该 页 留言 , 按 “ 上 页 ”/“ 下 页 "按钮 可 以 翻 页 ,每 个 页 面 只 显示 10 条 留言 
记录 。 

主页 提供 了 用 户 发 布 留言 的 接口 “我 要 留言 " 超 链接 , 单 击 这 个 超 链 接 可 进入 用 户 留 
言 发 布 页 面 。 


elll 


2. lyb-index. jsp 页 面 程序 功能 程序 代码 
留言 主页 lyb-index. jsp 的 源 代 码 如 下 所 示 , 可 参考 使 用 。 


<$%@page contentTYpe= "text/html; charset= gb2312" language= "java" import="java.sql.*™" 
errorPage="" %> 


<%Q@include file="opendata.jsp"%> 


<html><head><title> 用 户 留言 模块 Version1.0< /title> 

<link href= "1yb.css" rel="stylesheet" type= "text/css"> 
<jsp:useBean id= "PageCt" scope= "page" class= "lyb.PageCt" /> 
< /head> 


<body> 
<TABLE cellSpacing=1 cellPadding= 3 width= 98% align= center background= "images/top_line. 
gif" border=0> 
<TR align=middle> 
<TD width= "20%" align= "left" nowrap> < FONT color=#78b3f£f9> gnbsp; gnbsp; 
<script src= "week.js" language= "JavaScript" type= "text/javascript"> 
</script> 
< /FONT>< /TD> 
<TD width= "20% " nowrap> 
<div id="Layerl" style="position:absolute; width: 198px; height: 62px; z— index:1; 
left: 284px; top: 3lpx;"> 
<img src="../image/logo6gif.gif" width="160" height= 
<TD width= "20% " nowrap> < /TD> 


" border="0">< /div>< /TD> 


<TD width= "20% " nowrap> gnbsp;< /TD> 
<TD width= "20%" nowrap>< /TD> 
</TR> 
< /TABLE> 
<TBIE height = 76 cellSpacing = 0 cellPadding = 0 width = 98% align = center background = 
"images/bottom line.jpg" border=0> 
<TR> 
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< TD> 
< TIRBIE height = 72 cellSpacing = 0 cellPadding = 0 width =" 99%" align = center bgColor= 
# £fffff border= 0> 
<TR> 
<TD width= "163" align= "center"> 
<IMG src="images/login.gif" border=0 width="154" height= "60">< /TD> 
<TD width="476" align= right>< /TD> 
<TD align= center width=123> 
< TABLE width= "90% " border=0 cellPadding=1 cellSpacing= 0> 
<TR vAlign= center align=middle> 
<TD width= "30% "> 
<IMG height=16 src="images/homepage.gif" width=16>< /TD> 
<TD width= "70% "><a href="../main.jsp"> 网 站 主页 < /a>< /TD> 
</TR> 
<TR vAlign= center align=middle> 
<TD>< /TD> 
<TD>< /TD> 
</TR> 
<TR vAlign= center align=middle> 
<TD>< IMG height=16 
Src= "images/Favorites.gif" 
width=16> < /TD> 
<TD><a href="../user.jsp"> 用 户 天 地 < /a> < /TD> 
</TR> 
< /TABLE> < /TD> 
</TR> 
< /TABLE> < /TD> 
< /TR> 
< /TABLE> 
<table width="98% " align= "center" cellpadding="0" cellspacing= "0" background= "images/ 
index-t.gif"> 
<tr> 


<td width= "5% " align= "left"> 


</td> 
<td height= 


</tr> 


2" align= "left"><a href="say.jsp"> 我 要 留言 </a></td> 


</table> 


<table width= "98% " border= "0" align= "center" cellpadding= "0" cellspacing= "0"> 
交 计 ES 
<tqd height= "3"> < /td> 
< /tr> 


< /table> 


Ial2 。 


<table width= "98% " border= "0" align= "center" cellpadding= "0" cellspacing= "0" bgcolor=" 
#4f8lca"> 
<tr 


<td>< table width= "100%" border= "0" align= "center" cellpadding="]1" cellspacing=" 


I 
<% 
// 查 找 数据 库 中 的 留言 记录 数 


ResultSet rs0=s.executeQuery ("select count (* ) from lyb"); 
rs0.next () 7 
long data num=rs0.getLong (1) 7 
long Current Page=0; 
String currentpage= (String) request .getParameter ("currentpage"); 
if (currentpage!=null &&! currentpage.equals("")) 
{ 
Current Page= Integer.parseInt (request .getParameter ("currentpage")); 
} 
String Query Page= (String) request .getParameter ("Query Page"); 
if (Query Page!=null &&! Query Page.equals("")) 
和 
Current Page= Integer.ParseInt (request .getParameter ("Query Page"))-1; 
} 
PageCt .Init (Current Page,data num); 
long 1 start= PageCt.getStart () 7 
long 1 end= PageCt .getEnd () 7 


// 查 询 记录 
rs=s.executeQuery ("select * from lyb order by id desc"); 
long i=0; 
while((i<] start) && rs.next()){ i++; 
} 
// 输 出 查询 结果 
long j=0; 
while (rs.next() && (i<] end)) 
{ j=i+l1; 
> 
<tr 

<%if((i%2)!=0){%>bgcolor= "#78b3f9"<% }else{%>bgcolor="#BEDAFC"<%$}%>> 

<td width="20%" align= "center" > 留言 人 :<%=rs.getstring ("name")%> 
<img src="<%=rs.getSstring ("sex")%>" border="0"></td> 

<td><table width= "100%" border= "0" cellpadding= "0" cellspacing= "0"> 

<tr align="left"<%if((i%2)!=0){%>bgcolor="#78b3f9"<% }else{%®> bgcolor 
="#BEDAFC"<$%}%$>> 
<td width= "25$% "><a href="<%=rs.getstring ("www")%>"> 


。 313mlg 


< img src="images/HOME.gif" alt=" 个 人 主页 " width="16" height= 

"16" border= "0" align= "absmiddle"> 

</a> 个 人 主页 </td> 

<td width= "25% "> 
< img src= "images/ip.gif" alt="" width="13" height= "15" align= "absmiddle"> 

IP: <%=rs.getstring ("IP")%$ ></td> 

<td width="25% "><a href= "mailto:<%=rs.getSstring ("email")$>"> 

<img src="images/EMAIL.gif" alt=" 留 言 人 E-Mail" width= "16" height= "16" 


align= "absmiddle"> 
</a>E-Mail< /td> 
<td width= "25% "> 
< img src= "images/oicq.gif" alt="" width= "16" height= "16" align= "absmigddle"> 
QQ:<%=rs.getstring ("oicq")%s >< /td> 
</tr> 
</table></td> 
</tr> 
<tr 
<%if((i%2)!=0){%>bgcolor= "#78b3f9"<% }Jelse{%>bgcolor="#BEDAFC"<% }%>> 
<td width= "20% " align= "center"> 


<img src="<%=rs.getstring("face")®% >" border= ></td> 
<td><%=rs.getstring ("memo")%>< /td> 
</tr> 
< 
<%if((i%2)!=0){%>bgcolor="#78b3f9"<% }else{%>bgcolor="#BEDAFC"<% }%>> 
<td width= "20% " align= "center"> 时 间 : <%=rs.getSstring ("addTime")%>< /td> 
<td> < /td> 
< /tr> 
< 七 > 
<td colspan= "2" align= "center" bgcolor= "# ffffff"> 
<hr size= "1" color="# 000080" width="100% "> < /td> 


</tr> 
<% 


ntopn 
< form method= GET action= lyb- index.jsp> 
< td colspan="2" bgcolor="# FFFFFF"> 共 <%=PageCt.getTotalnum()%> 条 <%= 
PageCt .getCurpage ()+1%>/<%=PageCt.getTotalpage ()%> 
页 查看 第 
< input type= text name=Query_ Page size= 3> 
页 <a href=1yb- index.jsp? currentpage=<%=PageCt.getPrepage ()%>> 上 页 </a> 
<a href=— 1yb- index.jsp? currentpage=<%$=PageCt.getNextpage()%>> 下 页 </a> 
&nbsp; gnbsp; gnbsp;< /td> 
< /form> 


Mer 4 。 


< /tr> 
</table>< /td> 
< /Er> 


< /table> 


<table width=" 98%" border ="0" align =" center" cellpadding ="2" 


background= "images/bottom line.gif"> 
写作 
<td width="27% "> < /td> 
<td width= "73g% "> < /td> 
< /tr> 
< tr> 
<td> < /td> 
<td> 建 议 800* 600 IE5.5 以 上 (推荐 6.0) 
< /td> 
< /tr> 
<tr> 
<td></td> 
<td></td> 
</tr> 
</table> 
< /body> 
</html> 


3. 页 面 程 序 运行 结果 
用 户 留言 主页 lyb-index. jsp 页 面 的 运行 结果 如 图 10. 17 所 示 。 


httpy//localhost:8080/WZKF/lyb/lyb-indexjsp -P| 笑 * 中 


cellspacing ="2"™ 


@ 必 | 国 


我 要 留言 
留言 人 : 张驰 Es 个 人 主页 田 理 : 0:0:0:0:0:0:0:1 。 _ 7 EMail Mu: 


留言 人 : 17 丙 | 全 个 人 页 田阳 :0:0:0:0:0:0:0:1 Eail A 
a 下 


图 10.17 用 户 留言 主页 


注意 : 


(1) 本 程序 文件 虽然 很 长 ,主要 是 表格 的 各 种 标记 ,要 注意 在 表格 中 使 用 JSP 语句 的 


3] 夯 同 | 


(2) 本 程序 有 多 个 程序 语句 被 分 为 了 两 行 ,这 是 排版 造成 的 ,在 编写 程序 时 要 注意 不 
能 将 一 个 程序 语句 写 为 两 行 。 


10.6.7 发 布 用 户 留言 页 面 
1. say.jsp 页 面 程 序 功 能 


在 顾客 留言 系统 主页 单 击 “ 我 要 留言 ”链接 可 进入 say. jsp 发 布 留言 页 面 ,该 页 面 的 
功能 是 让 用 户 输 入 留言 内 容 ,输入 或 选择 用 户 的 信息 。 


2. say.jsp 页 面 程序 代码 
下 面 给 出 用 户 留 言 主页 say. jsp 的 源 代 码 ,可 参考 使 用 。 


<html> 

<link href= "1yb.css" rel= "stylesheet" type= "text/css"> 

<body leftmargin= "0" topmargin= "0" marginwidth= "0" marginheight= 
< table height = 76 cellSpacing = 0 cellPadding = 0 width = 821 align = center background = 
"images/bottom line.jpg" border= 0> 


<tr> 
<td width= "821"> 
<table height= 72 cellSpacing=0 cellPadding= 0 width= "99% " align= center bgColor=# 
ffffff border= 0> 
< 七 > 
<td width= "163" align= "center"> 
<img src="images/login.gif" border=0 width= "154" height= "60"> 
</td> 
<tqd width="476" align=right>< /td> 
<td align= center width= 123> 
<table width= "90% " border=0 cellPadding=1 cellSpacing= 0> 
<tr vAlign= center align=middle> 
<td> < img height=16 src="images/homepage.gif" width=16>< /td> 
<td><a href="../main.jsp"> gnbsp;&nbsp; 网 站 主页 < /a>< /td> 
</tr> 
<tr vAlign= center align=middle><td></td><td></td></tr> 
<tr vAlign= center align=middle> 
<td> < img height=16 src="images/Favorites.gif" width=16></td> 
<td> gnbsp;<a href="../user.jsp"> snbsp; 会 员 天 地 主页 < /a> < /td> 
</tr> 
</table></td> 
</tr> 
</table>< /td> 
</tr> 
</table> 


<table width= "820" align= "center"™" cellpadding= "0" cellspacing="0" background= "images/ 


Im316 。 


index- 七 .gif"> 
<tr><td width= "45" align= "left">< /td> 
<td height= "22" align= "left" width= "775"> <b> 
<a href= "1yb- index.jsp"> 去 看 留言 </a> 
</b>< /td> 
</tr> 


</table> 


< table width=" 815" border="0" align 
bordercolor= "4f81ca" bgcolor= "4f81ca"> 


center™" cellpadding cellspacing="1" 
<tr> 
<tqd width= "811"> 
<table width= "100% " border="0" align= "center" cellpadding="1" cellspacing="1"> 
< form name= "form" action= "saysucc.jsp" method= "post"> 
<tr bgcolor= "# FFFFFF"> 
<td width= "40%" align= "right"> 用 户 名 : < /td> 
<td width= "50% "> < input type= "text" name= "name" size= "20"> < /td> 
</tr> 
<tr bgcolor= "# FFFFFF"> 
<td align= "right"> 性 别 : < /td> 
<td> < input type= radio CHECKED value= images/Male.gif name= sex> 
<img src=images/Male.gif width="23" height="21"> 男 孩 gnbsp;&nbsp;&nbsp;&nbsp; 
<input type= radio value= images/Female.gif name= sex> 
<img src=images/Female.gif width="23" height="21"><font> 女 孩 </font></td> 
</tr> 
<tr bgcolor= "# FFFFFF™"> 
<td width="40%" align= "right"> 个 人 主页 地 址 : < /td> 
<td width= "50% "> < input type= "text" name= "www" size="20">< /td> 
</tr> 
<tr bgcolor= "# FFFFFF"> 
<td width= "40%" align= "right"> 电 子 邮 件 地 址 : < /td> 
<td width= "50% "> < input type= "text" name= "email" size="20">< /td> 
</tr> 
<tr bgcolor="#FFFFFF"><td align= "right"> 你 的 oICQ 号 :</td> 
<td>< input type= "text" name= "oicq" size= "20"> < /td> 
< /tr> 
<tr bgcolor= "#FFFFFF"> 
<td align= "right"> 选 择 留言 使 用 的 头像 : < /td> 
<td> < select name= face size= 1 onChange= "document. jimages [' face'].src= options 
[selectedIndex] .value;" style= "BACKGROUND- COLOR: # 99CCFF7COLOR: #000000"> 
< option value= "images/Imagel.gif" selected> imagel.gif< /option> 


<option value= "images/image2.gif"> image2.gif< /option> 


<option value= "images/image3.gif"> image3.gif< /option> 
<option value= "images/image4.gif"> image4.gif< /option> 


<option value= "images/image5.gif"> image5.gif< /option> 


”34B 网 


< option value= "images/image6-gif"> image6.gif< /option> 
< option value= "images/image7.-gif"> image7.gif< /option> 
<option value= "images/image8.gif"> image8.gif< /option> 
<option value= "images/image9.gif"> image9.gif< /option> 
<option value= "images/image10.gif"> image10.gif< /option> 
< /select> gnbsp; 
< img src= images/Imagel.gif width= "32" height= "32" id= face> gnbsp; 
选择 头像 
</td></tr> 
<tr bgcolor="#FFFFFF"><td align= "right"> 在 这 里 写 留言 内 容 : < /td> 
<td>< textarea name= "memo" cols="50" rows="10">< /textarea> < /td> 
ES 
<tr bgcolor= "#FFFFFF"> 
<td align="right"><input type="submit" name= "Submit" value=" 提 交 ">< /td> 
<td><input type= "reset" name= "Submit2" value= " 重 置 "> < /td> 
< /tr> 
< /form> 
</table>< /td> 
< /tr></table> < /body> < /html> 


3. 页 面 程序 运行 结果 
用 户 发 布 留言 的 页 面 如 图 10. 18 所 示 。 


(eT ~ 国 http://localhost:60801jspymyjapylybysey jsp 国 [ss][x| 


buidu [加 
文件 中 编辑 EE) 查看 Q 收藏 天 W) 工具 IT) 帮助 00 链接 多 |hso123 网 址 之 家 >” 
帘 安国 http://loealhost:8080/jsp/nyjsp/lyb/say jsp 偷 - 咒 - 导 页 面 中- 稳 IRO-” 

-2 3 内 网 
于 国人 
去 看 留言 
用 户 名 : [ 渍 而 证 
Eolab 
个 人 主页 地 址 ; 
电子 邮件 地 址 
你 的 0ICQ 号 : 
轩 反 入 言 使 用 的 头 从 :| | 
这 是 我 的 留言 | 
在 这 里 写 留言 内 容 : 
EE 
四 Internet 四 loox > .:; 


图 10.18 用 户 发 布 留言 页 面 


jals = 


10.6.8 保存 用 户 留 言 与 显示 留言 成 功 页 面 
1. saysucc. jsp 页 面 程 序 功 能 


在 发 布 用 户 留言 页 面 输入 完毕 单 击 “ 提 交 ” 按 钮 后 ,用 户 输入 的 数据 将 提交 给 保存 数 
据 程序 saysucc. jsp ,该 程序 的 功能 是 将 用 户 输入 的 留言 数据 保存 到 数据 库 的 lyb 表 中 , 然 
后 显示 留言 成 功 信息 ,并 提供 了 一 个 查看 留言 (返回 留言 主页 ) 的 接口 。 


2. saysucc. jsp. jsp 页 面 程序 代码 
保存 用 户 留 言 与 显示 留言 成 功 页 面 saysucc. jsp 的 源 代 码 如 下 所 示 ,可 参考 使 用 。 


<$% page language= "java" contentTYPe= "text/html;charset= gb2312" errorPage=""$> 
<$@page import: 
<%Q@include file="opendata.jsp"%> 


ava.sql.*"%> 


<html> 
<head> 


<link href= "1yb.css" rel="stylesheet" type= "text/css"> 


lyb.bean" /> 


<jsp:useBean id= "bean" scope= "page" class= 
< /head> 
<body leftmargin= "0" topmargin= "0" marginwidth= 


" marginheight= 


< script src= "week.js" language= "JavaScript" type= "text/javascript">< /script> 


< img src="images/logo6gif.gif" width= "160" height= "35" border= 
< img src= "images/homepage.gif" width=16 height=16> 

<a href="../main.jsp"> 网 站 主页 </a> 

< img height=16 src="images/Favorites.gif" width=16> 

<a href="../user.jsp"> 会 员 天 地 </a> 


<p> 


< 多 

String IP= request .getRemoteAddr () 

String usernamel= request .getParameter ("name"); 
String username=bean.ex chinese (usernamel); 
String www= request .getParameter ("www"); 

String oicq= request .getParameter ("oicq"); 
String email= request .getParameter ("email"); 
String memo=new String (request .getParameter ("memo") .getBytes ("8859 1")); 
String sex= request .getParameter ("sex"); 

String face= request .getParameter ("face"); 
username=username.trim(); 

WWwW= Www .trim(); 

oicq=oicq.trim(); 


email=email.trim(); 
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String dd=bean.gettime (); 


sql= "insert into lyb (name, IP, email, oicq www, addTime, memo, sex, face) values ('"+username 
+ "IPt" "emilt" "olor"™ "+ wt " "oO" "mmt "+ Sext "yy "+ 
facet ”""}"y 
s.executeUpdate (sql) ; 
try { 
s.close(); 
clo058() 
} 
Catch (Exception ex) { } 
名 > 
<br> 
<%=username%> 你 好 ! 你 写 的 留言 已 经 成 功 录 入 ,<a href="lyb- index.jsp"> 
< font color="#FF0000"> 可 以 返回 用 户 留言 主页 < /font>< /a> 查 看 你 的 留言 。< /p> 
< /body> 
< /html> 


3. 留言 成 功 后 显示 的 页 面 


留言 成 功 后 显示 的 saysucc. jsp 页 面 如 图 10. 19 所 示 。 


http://localhost:8080/jsp/myjsp/1lyb/saysucc. jsp 
© 国 hetp:yaocalhest:80aoyjsp/mzjsp/lyt/ 国 | 全 | | 
| 文件 中 编辑 加 ”查看 中 收 基 严 由 ) 工具 四， 天 助 0 
http://1ocadhost:8080/jsp/nyjs... | | 售 - -篇 - 肝 页 面 中 - 筝 工具- ” 


2008-11-18 星期 二 Au 意 网 站 主页 沪 会 员 天 地 


好 丽 萍 你 好 ! 你 写 的 留言 已 经 成 功 录入 ， 可 以 返回 用 户 留言 许 页 查看 你 的 留言 。 


图 10.19 保存 用 户 留言 信息 及 显示 留言 成 功 页 面 


4. 通过 数据 库 保存 图 片 存放 路 径 


本 程序 提供 了 将 简体 中 文 数据 保存 到 数据 库 的 方式 、 以 及 通过 数据 库存 放 图 片 路 径 
以 便 显示 图 片 的 方式 (当然 ,要 有 相应 存放 图 片 的 文件 夹 及 图 片 文件 )。 通 过 这 种 方式 可 
以 展示 多 种 产品 的 图 片 。 

5. 到 主页 的 接口 


在 保存 用 户 留言 与 显示 留言 成 功 页 面 saysucc. jsp 上 单 击 “可 以 返回 用 户 留 言 主页 ” 
超 链接 ,将 返回 主页 ,在 这 里 可 以 看 到 刚刚 输入 的 留言 内 容 .如 图 10. 20 所 示 。 


W320 。 


/= 用户 留言 模块 Yersion 1-0 — Windows Internet Explorer 


本 日 - http: /localhost:8080/jsp/nyjsp/1yb/1yb. jsp 要 加 1 
文件 下 ) 编辑 于 ) 查看) 收 送 夹 &) 工具 CI) 帮助 0D 


帘 窑 | 国 用 户 留 言 模块 ersiont.0 je 全 - 大 - 愉 页 面 中 - 答 工 具 - 


> A_ 人 网 站 主页 | 牛 
蔬 言 簿 | 


我 要 留言 
留言 全 丽 萍 
a 


可 个 人 主页 加 IP: 127.0.0.1 _ Eail 从 aa: 
| 这 是 我 的 留言 。 


时 间 ，2008-11-18 
16:28:10 


图 10.20 新 的 留言 页 面 


10.7 思考 与 练习 


10.7.1 思考 题 


10-1 常用 的 公用 文件 有 哪些 ? 

10-2 首页 有 什么 特点 ? 

10-3 ”主页 有 什么 特点 ? 

10-4 ”如 何 确定 其 他 页 面 文件 在 主页 中 的 显示 位 置 ? 


10.7.2 上 机 练习 


10-1 创建 一 个 简单 的 进入 主页 的 首页 。 

10-2 ”实现 书 中 介绍 的 导航 条 程序 dht. htm, 与 主页 上 部 程序 main-1. htm 重新 组 合 
为 一 个 能 通 向 所 有 功能 页 面 的 主页 上 部 程序 main1. htm。 

10-3 ”编写 一 个 主页 底部 程序 main2. htm。 

10-4 ”修改 register. jsp 程序 ,在 会 员 注 册 时 要 求 必须 填写 用 户 名 、 密 码 、 电 子 邮 件 地 
址 等 数据 。 如 果 这 些 数值 为 空 .不 能 进行 注册 ,给 出 不 能 注册 的 原因 ,让 用 户 重新 注册 或 
不 注册 。 

10-5 ”如果 用 户 忘记 了 密码 该 怎么 办 ? 在 用 户 登录 入 口 添 加 一 个 “忘记 密码 了 ”的 链 
接 , 编 写 一 个 帮助 用 户 找 到 密码 的 页 面 。 

10-6 根据 书 中 介绍 ,编写 两 个 漂亮 的 计数 器 ,一 个 统计 浏览 网 页 的 次 数 ,一 个 记录 
访问 网 站 的 人 数 。 提 高 一 步 编写 一 个 显示 注册 会 员 人 数 的 计数 器 。 

10-7 创建 一 个 模块 化 的 主页 。 
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实用 文书 写作 (第 2 版 ) 

最 新 常用 软件 的 使 用 一 -Office 2000 
计算 机 办 公 软 件 实用 教程 一 -Ofioe xP 中 文 版 
计算 机 英语 


应 用 型 教材 系列 

QBASIC 语言 程序 设计 

QBASIC 语言 程序 设计 题解 与 上 机 指导 
Ci 语言 程序 设计 (第 2 版 ) 

C 语 言 程 序 设 计 (第 2 版 ) 学 习 辅 导 
C++ 程序 设计 

C++ 程序 设计 例题 解析 与 项 目 实践 
Visual Basic 程序 设计 (第 2 版 ) 

Visual Basic 程序 设计 学 习 辅 导 (第 2 版 ) 
Visual Basic 程序 设计 例题 汇编 

Java 语言 程序 设计 (第 3 版 ) 

Java 语言 程序 设计 题解 与 上 机 指导 (第 2 版 ) 
数据 库 应 用 技术 (FoxPro ) 

Visual FoxPro 使 用 与 开发 技术 (第 2 版 ) 
Visual FoxPro 实验 指导 与 习题 集 

Access 数据 库 技术 与 应 用 
Internet 应 用 教程 (第 3 版 ) 

计算 机 网 络 技术 与 应 用 

络 互 连 设备 实用 技术 教程 

络 管理 基础 (第 2 版 ) 

电子 商务 概论 (第 2 版 ) 

电子 商务 实验 

商务 网 站 规划 设计 与 管理 

网 络 营 销 

电子 商务 应 用 基础 与 实 训 

网 页 编程 技术 (第 2 版 ) 

网 页 制作 技术 

实用 数据 结构 


多 媒体 技术 及 应 用 
计算 机 辅助 设计 与 应 用 
3ds max 动画 制作 技术 (第 2 版 ) 
计算 机 安全 技术 

计算 机 组 成 原理 

计算 机 组 成 原理 例题 分 析 与 习题 解答 
计算 机 组 成 原理 实验 指导 
微机 原理 与 接口 技术 

MCS 一 51 单 片 机 应 用 教程 

应 用 软件 开发 技术 

Web 数据 库 设 计 与 开发 

平面 广告 设计 (第 2 版 ) 

现代 广告 创意 设计 

网 页 设计 与 制作 

图 形 图 像 制作 技术 


实 训 教材 系列 

常用 办 公 软 件 综合 实 训 教程 

C 程 序 设计 实 训 教程 

Visual Basic 程 序 设计 实 训 教 程 

Access 数据 库 技术 实 训 教程 

SQL Server 2000 数据 库 实 训 教程 

Windows 2000 网 络 系统 实 训 教 程 

网 页 设计 实 训 教程 (第 2 版 ) 

小 型 网 站 建设 实 训 教程 

微型 计算 机 及 小 型 网 络 系统 的 安装 与 维护 
实 训 教程 

网 络 技术 实 训 教 程 

Web 应 用 系统 设计 与 开发 实 训 教程 

图 形 图 像 制 作 实 训 教程 


实用 技术 教材 系列 
Intemet 技术 与 应 用 (第 2 版 ) 
C 语 言 程序 设计 实用 教程 
Cr+ 程 序 设 计 实 用 教程 


Visual Basic 程序 设计 实用 教程 
Visual Basic.NET 程序 设计 实用 教程 


Java 语言 实用 教程 
应 用 软件 开发 技术 
数据 结构 实用 教程 


实用 教程 


Access 数据 库 技术 实用 教程 


站 编程 技术 实用 
络 管 理 基础 实用 


教程 
教程 


Intemet 应 用 技术 实用 教程 

Flash MX 动画 制作 实用 教程 

Dreamweaver 网 页 设计 实用 教程 

多 媒体 应 用 技术 实用 教程 

软件 课程 群 组 建设 一 毕业 设计 实例 教程 


软件 工程 实用 教程 
三 维 图 形制 作 实用 教程 


读者 意见 反馈 


亲爱 的 读者 : 

感谢 您 一 直 以 来 对 清华 版 计算 机 教材 的 支持 和 爱护 。 为 了 今后 为 您 提供 更 优秀 的 
教材 ， 请 您 抽出 宝贵 的 时 间 来 填写 下 面 的 意见 反馈 表 ， 以 便 我 们 更 好 地 对 本 教材 做 进 
一 步 改进 。 同 时 如 果 您 在 使 用 本 教材 的 过 程 中 遇 到 了 什么 问题 , 或 者 有 什么 好 的 建议 ， 


也 请 您 来 信 告诉 我 们 。 
地 址 : 北京 市 海淀 区 双 清 路 学 研 大 厦 A 座 602 室 计算 机 与 信息 分 社 营销 室 收 
邮编 ， 100084 电子 邮件 : jsjjc@tup.tsinghua.edu.cn 


电话 : 010-62770175-4608/4409 邮购 电话 : 010-62786544 


教材 名 称 : 网 站 编程 技术 实用 教程 (第 2 版 

ISBN: 978-7-302-19720-1 

个 人 资料 

姓名 : 年 龄 : 所 在 院 校 /专业 : 
文化 程度 : 通信 地 址 : 

联系 电话 : 电子 信箱 : 

您 使 用 本 书 是 作为 : 口 指定 教材 口 选 用 教材 口 辅导 教材 口 
您 对 本 书 封面 设计 的 满意 度 : 

口 很 满意 口 满意 口 一 般 口 不 满意 ”改进 建议 

您 对 本 书 印 刷 质 量 的 满意 度 : 

口 很 满意 口 满意 口 一 般 口 不 满意 ”改进 建议 

您 对 本 书 的 总 体 满意 度 : 

从 语言 质量 角度 看 口 很 满意 口 满意 口 一 般 口 不 满意 
从 科技 含量 角度 看 口 很 满意 口 满意 口 一 般 口 不 满意 
本 书 最 令 您 满意 的 是 : 

口 指导 明确 口内 容 充实 口 讲解 详尽 口 实例 丰富 

您 认为 本 书 在 哪些 地 方 应 进行 修改 ? (可 附 页 ) 


您 希望 本 书 在 哪些 方面 进行 改进 ? (可 附 页 ) 


电子 教案 支持 


敬爱 的 教师 : 

为 了 配合 本 课程 的 教学 需要 ， 本 教材 配 有 配套 的 电子 教案 (素材 )， 有 需求 的 教师 可 
以 与 我 们 联系 ， 我 们 将 向 使 用 本 教材 进行 教学 的 教师 免费 赠送 电子 教案 (素材 ), 希望 有 
助 于 教学 活动 的 开展 。 相 关 信 息 请 拨打 电话 010-62776969 或 发 送 电子 邮件 至 
jsjjc@tup.tsinghua.edu.cn 咨询 ， 也 可 以 到 清华 大 学 出 版 社 主页 (http://www.tup.com.cn 或 
http://www.tup.tsinghua.edu.cn) 上 查询 。 


